Fill effect on image with Css Canvas or Svg

Question

Fill effect on image with Css Canvas or Svg

Navigation

#1 by (8 votes)
#2 by (1 votes)

3

I need to know if there is any way to generate a "wave" filling effect ON A PNG IMAGE. It does not matter if it's with CSS, SVG, Canvas or some external javascript library. With a small example, they help me a lot.

It would be something like this, but on a PNG image. link

Expected

/* 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>

link

css3 css canvas svg

asked by nawelittle 30.10.2018 в 14:03

source

2 answers

1

I think this could help you achieve what you want. You only have to increase the property every "x" milliseconds.

I include the example:

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

Link to source

answered by 01.11.2018 в 19:43

Simple problems with PHP arrays Cube dice roll

score 8 · Accepted Answer

As I told you in my comment, I would have needed your images without deforming. I picked up something similar from the internet. For the waves I use two canvas elements.

In HTML I have a #Hamburg element, inside which there are all the faces of a parallelogram. If you do not like the orientation, please change this line of code: transform: rotateY(-45deg) rotateX(-10deg) rotateZ(7deg); in CSS for #Hamburg . Also try changing the perspective of the 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>