Skip to content

Instantly share code, notes, and snippets.

@trongthanh
Created April 17, 2012 05:19
Show Gist options
  • Save trongthanh/2403656 to your computer and use it in GitHub Desktop.
Save trongthanh/2403656 to your computer and use it in GitHub Desktop.
Realistic CSS3 Waterfall
/**
* Realistic CSS3 Waterfall
* Author: Thanh Tran
* License: MIT
* Tutorial: http://blog.int3ractive.com/2012/04/tutorial-realistic-waterfall-with-css3.html
* Image courtesy: http://wolffanticy.webs.com/waterfallcavepack.htm
*/
/* Container with the static waterfall background image */
.waterfall {
position: relative;
width: 960px;
height: 801px;
background-image: url("https://raw.github.com/trongthanh/ttt-sources/master/demos/html-css/realistic-css3-waterfall/img/waterfall.jpg");
}
.waterfall > div {
position: absolute;
}
/* The waterfall loop
Key ingredients:
- Vertically seamless bitmap
- Background repeat Y
- Infinite animation which shifts background position vertically
*/
.waterfall-loop {
/* offset x of the mask */
left: 367px;
/* offset y of the mask */
top: 87px;
/* width of the mask */
width: 221px;
/* height of the mask */
height: 620px;
background: url("https://raw.github.com/trongthanh/ttt-sources/master/demos/html-css/realistic-css3-waterfall/img/waterfall-loop.png") 0 0 repeat-y;
-moz-animation: waterfallloop 5s infinite linear;
-webkit-animation: waterfallloop 5s infinite linear;
-ms-animation: waterfallloop 5s infinite linear;
-o-animation: waterfallloop 5s infinite linear;
}
@-moz-keyframes waterfallloop {
0% { background-position:0 0; }
/* the end position y must equal bitmap's height */
100% { background-position: 0 1112px; }
}
@-webkit-keyframes waterfallloop {
0% { background-position:0 0; }
100% { background-position: 0 1112px; }
}
@-ms-keyframes waterfallloop {
0% { background-position:0 0; }
100% { background-position: 0 1112px; }
}
@-o-keyframes waterfallloop {
0% { background-position:0 0; }
100% { background-position: 0 1112px; }
}
/* The mask overlay to soften borders */
.waterfall-mask {
width: 960px;
height: 801px;
background: url("https://raw.github.com/trongthanh/ttt-sources/master/demos/html-css/realistic-css3-waterfall/img/waterfall-mask.png") 367px 87px no-repeat;
}
<div class="waterfall">
<div class="waterfall-loop"></div>
<div class="waterfall-mask"></div>
</div>
/*int3ractive.com*/
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment