Question

I am sure the answer is staring me in the face, but I can’t seem to figure this out.

Goal: What I am trying to do is animate liquid filling up a cup. This doesn’t have to be super realistic. I was thinking that I could have a cup image as one layer, and behind it have the image of liquid and reveal the liquid slowly to give the illusion that it’s being filled it up. This will work in conjunction with a preloader (that I have already built).

What I have tried: My first thought was to try and use a CSS Mask, so I tinkered with that a little bit. While it does have a wide range of options, you can’t just define your image and everything outside of the mask that you’ve define would show the image behind. Instead, it only shows the places you have cut out in your mask, and everything outside of your mask is white. Using mask-position and mask-repeat: none does not work to try and work around this.

What I think could work: Maybe some sort of background positioning that gets animated?? While looking into this, it didn’t seem like I was going to be able to make this do what I wanted. I know that this would work in an animation capacity to move the mask layer slowly to give it that illusion of a cup being filled up.

My question: How would I reveal parts of an image slowly to give it the illusion that it’s slowly filling up a cup by using an image of a cup as a top layer and the liquid as the layer behind with a mask between that gets animated to show the liquid?

Answer 1

UPDATE 8/5/2015

Here is a new example using pure CSS!

http://jsfiddle.net/SptRr/296/

ORIGINAL ANSWER

Here is a crude example, I hope you get the point though 🙂

FIDDLE

Heres a fiddle with a hover effect to fill the glass, just for fun!

HOVER FIDDLE

HTML

<img src='http://www.videsignz.com/testing/images/water-front.png' />
<div></div>

CSS

img {position:absolute; left:0px; top:0px; z-index:5;}
div {position:absolute; left:0px; top:350px; background-color:blue; height:0px; display:block; width:350px;}

JQuery

function animateit(){

$('div').animate({'height' : '350px', 'top' : 0 }, 2000, function(){
   $('div').animate({'height' : 0, 'top' : '350px' }, 2000, animateit);
});

}

animateit();