3

Necesito saber si hay alguna forma de generar un efecto de llenado de "ondas" SOBRE UNA IMAGEN PNG. No importa si es con CSS, SVG, Canvas o alguna librería externa de javascript. Con un pequeño ejemplo ya me ayudan bastante.

Sería algo como esto, pero sobre una imagen PNG. https://camo.githubusercontent.com/43505d196a3df4510258183b2bd6f58e1c482f5a/687474703a2f2f672e7265636f726469742e636f2f7a48654d71716c68346a2e676966

Esperado introducir la descripción de la imagen aquí

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-3">

<div class="well">

  <img src="https://www.hamburgsud-line.com/liner/media/hamburg_sud_liner_shipping/services/dry_cargo/20_trockencontainer_accordion_1240x697.png"style="width:100%">
  
</div>

</div>

https://jsfiddle.net/DTcHh/95750/

2

2 respuestas 2

8
+50

Como ya te dije en mi comentario, habría necesitado tus imágenes sin deformar. Cogí algo parecido del internet. Para las olas utilizo dos elementos canvas.

En el HTML tengo un elemento #Hamburg, dentro de cual hay todas las caras de un paralelogramo. Si no te gusta la orientación, por favor cambia esta línea de código: transform: rotateY(-45deg) rotateX(-10deg) rotateZ(7deg); en el CSS para el #Hamburg. También prueba cambiar la perspectiva del body.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let percent = .5;

const _canvas = document.getElementById("_canvas");
const _ctx = _canvas.getContext("2d");


let cw = canvas.width = 276;
let ch =_canvas.width = _canvas.height = canvas.height = 64;


let amplitude = 12;
let frequency = .053;
let phi = 0;


ctx.fillStyle = _ctx.fillStyle = "rgba(0,0,0,.6)";

drawSineWave(ctx,cw,0,percent);
drawSineWave(_ctx,ch,cw,percent);

function drawSineWave(ctx,w,start,percent){
  ctx.beginPath();
  ctx.moveTo(0,0);
for (let x = 0; x <= w; x++) {
    let y = Math.sin((start + x) * frequency + phi) * amplitude / 2 + ch*(1-percent);
    ctx.lineTo(x, y); // 40 = offset
  }
ctx.lineTo(w,0);
ctx.lineTo(0,0);
ctx.closePath();
ctx.fill();
}



function Draw() {
requestId = window.requestAnimationFrame(Draw);
ctx.clearRect(0,0,cw,ch);
_ctx.clearRect(0,0,ch,ch);
phi += .1;  

drawSineWave(ctx,cw,0,percent);
drawSineWave(_ctx,ch,cw,percent);
}
Draw();
html,
body {
  height: 100vh;
  perspective: 400px;
}

#Hamburg {  
  height: 64px;
  width: 276px;
  margin: auto;
  position: absolute;
  transform-style: preserve-3d;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  transform: rotateY(-45deg) rotateX(-10deg) rotateZ(7deg);
  transform-origin: top left;
}

.face {
  left: 0;
  top: 0;
  position: absolute;  
  background-color:hsl(358,76%,45%);
  height: 64px;
  width: 276px;
  background: hsl(358,76%,45%);
}

#canvas {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/Hamburg.png');
}
#_canvas {
  background: hsl(358,76%,40%);
}

.left {
  width: 64px;
  transform: rotateY(-90deg);
  transform-origin: top left;
  background:gold;
}

.right {
  width: 64px;
  transform: translateX(276px) translateZ(64px) rotateY(90deg);
  transform-origin: left top;
}

.top {
  transform: rotateX(90deg);
  transform-origin: left top;
  background:hsl(357,78%,16%)
}

.bottom {
  transform: rotateX(-90deg);
  transform-origin: bottom left;
}

.front {
  transform: translateZ(64px); 
  ttransform-origin: top left;
  
}

.back {}
<div id="Hamburg">
  <div class="face back"></div>
  <div class="face left"></div>
  <div class="face right"><canvas id="_canvas"></canvas></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
  <div class="face front"><canvas id="canvas"></canvas></div>
</div>

3
  • Y en caso de ser una imagen plana? de que manera lo podría implementar, por ejemplo : vignette.wikia.nocookie.net/fantendo/images/c/c9/…
    – nawelittle
    el 5 nov. 2018 a las 15:15
  • No se si te entiendo muy bien: o sea ahora quieres cambiar la pregunta. Ya no quieres el contenedor de Hamburg Süd sino una pelota? Para mi una pelota no es una imagen plana sino una esfera o un poliedro complejo. Si quieres "un efecto de llenado" para una pelota, creo que esta sería otra pregunta.
    – enxaneta
    el 5 nov. 2018 a las 16:35
  • Claro, la pregunta concreta sería, si se podría aplicar la misma lógica a una imagen 2D.
    – nawelittle
    el 5 nov. 2018 a las 18:08
1

Creo que esto te podría ayudar a lograr lo que quieres. Solo debes ir aumentando la propiedad cada "x" milisegundos.

Te incluyo el ejemplo:

cnt.innerHTML = percent;
water.style.transform = 'translate(0, ' + (100 - percent) + '%)';
water.querySelector('.water__inner').style.height = percent + '%';

Link de fuente

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.