Skip to content

Instantly share code, notes, and snippets.

@cuongpx

cuongpx/Animate on scroll with wow.js.markdown

Created November 14, 2015 02:04
Show Gist options
  • Save cuongpx/25dc0598b5aab171222b to your computer and use it in GitHub Desktop.
Save cuongpx/25dc0598b5aab171222b to your computer and use it in GitHub Desktop.
Download ZIP
Animate on scroll with wow.js
Raw
Animate on scroll with wow.js.markdown
Raw
index.html
<div id="container">
<header>
<h1>Animate on scroll with wow.js</h1>
</header>
<div class="wow fadeInUp" data-wow-duration="2s">
<h4>Credits: <a href="http://lorempixel.com/" target="_blank">Images</a> |
<a href="http://fontawesome.io/icons/" target="_blank">Icons</a> |
<a href="http://mynameismatthieu.com/WOW/" target="_blank">WOW JS</a> | <a href="http://daneden.github.io/animate.css/" target="_blank">Animate CSS</a></h4>
</div>
<div id="main">
<!-- FONT AWESOME DEMO -->
<div class="col_third">
<i class="fa fa-heart fa-5x icn_red wow pulse" data-wow-iteration="infinite" data-wow-duration="500ms"></i>
</div>
<div class="col_third">
<i class="fa fa-heart fa-5x icn_blue wow shake" data-wow-iteration="infinite" data-wow-duration="1500ms"></i>
</div>
<div class="col_third end">
<i class="fa fa-heart fa-5x icn_green wow bounce" data-wow-iteration="infinite" data-wow-duration="800ms"></i>
</div>
<div class="clear"></div>
<!--END / FONT AWESOME DEMO -->
<!-- 3 COLUMN DEMO -->
<div class="col_third">
<section class="section--yellow wow fadeInLeft" data-wow-delay="0.1s" style="visibility: visible; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;"></section>
</div>
<div class="col_third">
<section class="section--yellow wow fadeInLeft" data-wow-delay="0.2s" style="visibility: visible; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;"></section>
</div>
<div class="col_third end">
<section class="section--yellow wow fadeInLeft" data-wow-delay="0.3s" style="visibility: visible; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></section>
</div>
<div class="clear"></div>
<!-- END / 3 COLUMN DEMO -->
<section class="section--purple"></section>
<section class="section--blue"></section>
<div class="wow fadeInUp" data-wow-duration="2s">
<h2 align="center"><strong>Reveal</strong> Animations When You Scroll</h2>
</div>
<section class="section--purple wow fadeInLeft" data-wow-duration="2s"></section>
<section class="section--green wow fadeInLeft" data-wow-duration="2s"></section>
<div class="clear"></div>
<!-- 3 COLUMN DEMO -->
<div class="col_third">
<section class="section--yellow wow fadeInRight" data-wow-delay="0.1s" style="visibility: visible; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;"></section>
</div>
<div class="col_third">
<section class="section--yellow wow fadeInRight" data-wow-delay="0.2s" style="visibility: visible; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;"></section>
</div>
<div class="col_third end">
<section class="section--yellow wow fadeInRight" data-wow-delay="0.3s" style="visibility: visible; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;"></section>
</div>
<div class="clear"></div>
<!-- END / 3 COLUMN DEMO -->
<div class="service-section">
<div class="wow_imgage wow fadeInLeft" data-wow-delay="0.1s" style="visibility: visible; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;">
<figure>
<img src="http://lorempixel.com/output/food-q-c-600-400-1.jpg" width="270" height="180"></img>
</figure>
</div>
<div class="wow_imgage wow fadeInLeft" data-wow-delay="0.2s" style="visibility: visible; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;">
<img src="http://lorempixel.com/output/food-q-c-600-400-2.jpg" width="270" height="180"></img>
</div>
<div class="wow_imgage end wow fadeInLeft" data-wow-delay="0.3s" style="visibility: visible; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
<img src="http://lorempixel.com/output/food-q-c-600-400-3.jpg" width="270" height="180"></img>
</div>
</div>
<!--.SERVICES SECTION-->
<div class="clear"></div>
<section class="section--yellow wow fadeInDown" data-wow-duration="1s"></section>
<section class="section--purple wow fadeInDown" data-wow-duration="2s"></section>
<section class="section--blue wow fadeInDown" data-wow-duration="2s"></section>
<section class="section--green wow fadeInDown" data-wow-duration="3s"></section>
<div class="service-section">
<div class="wow_imgage wow fadeInLeft" data-wow-delay="0.1s">
<img src="http://lorempixel.com/output/food-q-c-600-400-4.jpg" width="270" height="180"></img>
</div>
<div class="wow_imgage wow fadeInLeft" data-wow-delay="0.2s">
<img src="http://lorempixel.com/output/food-q-c-600-400-5.jpg" width="270" height="180"></img>
</div>
<div class="wow_imgage end wow fadeInLeft" data-wow-delay="0.3s">
<img src="http://lorempixel.com/output/food-q-c-600-400-6.jpg" width="270" height="180"></img>
</div>
</div>
<!-- End Images SECTION-->
<!-- 3 COLUMN DEMO -->
<div class="col_third">
<section class="section--yellow wow fadeInDown"></section>
</div>
<div class="col_third">
<section class="section--yellow wow fadeInDown"></section>
</div>
<div class="col_third end">
<section class="section--yellow wow fadeInDown"></section>
</div>
<div class="clear"></div>
<!-- END / 3 COLUMN DEMO -->
<!-- FONT AWESOME DEMO -->
<div class="col_third">
<i class="fa fa-heart fa-5x icn_red wow pulse" data-wow-iteration="infinite" data-wow-duration="500ms"></i>
</div>
<div class="col_third">
<i class="fa fa-heart fa-5x icn_blue wow shake" data-wow-iteration="infinite" data-wow-duration="1500ms"></i>
</div>
<div class="col_third end">
<i class="fa fa-heart fa-5x icn_green wow bounce" data-wow-iteration="infinite" data-wow-duration="800ms"></i>
</div>
<div class="clear"></div>
<!--END / FONT AWESOME DEMO -->
</div>
</div>
Raw
script.js
(function() {
var Util,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
Util = (function() {
function Util() {}
Util.prototype.extend = function(custom, defaults) {
var key, value;
for (key in custom) {
value = custom[key];
if (value != null) {
defaults[key] = value;
}
}
return defaults;
};
Util.prototype.isMobile = function(agent) {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent);
};
return Util;
})();
this.WOW = (function() {
WOW.prototype.defaults = {
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true
};
function WOW(options) {
if (options == null) {
options = {};
}
this.scrollCallback = __bind(this.scrollCallback, this);
this.scrollHandler = __bind(this.scrollHandler, this);
this.start = __bind(this.start, this);
this.scrolled = true;
this.config = this.util().extend(options, this.defaults);
}
WOW.prototype.init = function() {
var _ref;
this.element = window.document.documentElement;
if ((_ref = document.readyState) === "interactive" || _ref === "complete") {
return this.start();
} else {
return document.addEventListener('DOMContentLoaded', this.start);
}
};
WOW.prototype.start = function() {
var box, _i, _len, _ref;
this.boxes = this.element.getElementsByClassName(this.config.boxClass);
if (this.boxes.length) {
if (this.disabled()) {
return this.resetStyle();
} else {
_ref = this.boxes;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
this.applyStyle(box, true);
}
window.addEventListener('scroll', this.scrollHandler, false);
window.addEventListener('resize', this.scrollHandler, false);
return this.interval = setInterval(this.scrollCallback, 50);
}
}
};
WOW.prototype.stop = function() {
window.removeEventListener('scroll', this.scrollHandler, false);
window.removeEventListener('resize', this.scrollHandler, false);
if (this.interval != null) {
return clearInterval(this.interval);
}
};
WOW.prototype.show = function(box) {
this.applyStyle(box);
return box.className = "" + box.className + " " + this.config.animateClass;
};
WOW.prototype.applyStyle = function(box, hidden) {
var delay, duration, iteration;
duration = box.getAttribute('data-wow-duration');
delay = box.getAttribute('data-wow-delay');
iteration = box.getAttribute('data-wow-iteration');
return box.setAttribute('style', this.customStyle(hidden, duration, delay, iteration));
};
WOW.prototype.resetStyle = function() {
var box, _i, _len, _ref, _results;
_ref = this.boxes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
_results.push(box.setAttribute('style', 'visibility: visible;'));
}
return _results;
};
WOW.prototype.customStyle = function(hidden, duration, delay, iteration) {
var style;
style = hidden ? "visibility: hidden; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none;" : "visibility: visible;";
if (duration) {
style += "-webkit-animation-duration: " + duration + "; -moz-animation-duration: " + duration + "; animation-duration: " + duration + ";";
}
if (delay) {
style += "-webkit-animation-delay: " + delay + "; -moz-animation-delay: " + delay + "; animation-delay: " + delay + ";";
}
if (iteration) {
style += "-webkit-animation-iteration-count: " + iteration + "; -moz-animation-iteration-count: " + iteration + "; animation-iteration-count: " + iteration + ";";
}
return style;
};
WOW.prototype.scrollHandler = function() {
return this.scrolled = true;
};
WOW.prototype.scrollCallback = function() {
var box;
if (this.scrolled) {
this.scrolled = false;
this.boxes = (function() {
var _i, _len, _ref, _results;
_ref = this.boxes;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
box = _ref[_i];
if (!(box)) {
continue;
}
if (this.isVisible(box)) {
this.show(box);
continue;
}
_results.push(box);
}
return _results;
}).call(this);
if (!this.boxes.length) {
return this.stop();
}
}
};
WOW.prototype.offsetTop = function(element) {
var top;
top = element.offsetTop;
while (element = element.offsetParent) {
top += element.offsetTop;
}
return top;
};
WOW.prototype.isVisible = function(box) {
var bottom, offset, top, viewBottom, viewTop;
offset = box.getAttribute('data-wow-offset') || this.config.offset;
viewTop = window.pageYOffset;
viewBottom = viewTop + this.element.clientHeight - offset;
top = this.offsetTop(box);
bottom = top + box.clientHeight;
return top <= viewBottom && bottom >= viewTop;
};
WOW.prototype.util = function() {
return this._util || (this._util = new Util());
};
WOW.prototype.disabled = function() {
return !this.config.mobile && this.util().isMobile(navigator.userAgent);
};
return WOW;
})();
}).call(this);
wow = new WOW(
{
animateClass: 'animated',
offset: 100
}
);
wow.init();
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
/*-=-=-=-=-=-=-=-=-=-*/
/* GENERAL STYLES */
/*-=-=-=-=-=-=-=-=-= */
body {
overflow: scroll;
font-family: "Open Sans", Arial, Helvetica;
text-align: center;
background-color: #F5F5F5;
color: #666666;
background-image: url(http://subtlepatterns.com/patterns/stardust.png);
background-position: initial initial;
background-repeat: initial initial;
}
.clear {
clear: both;
display: block;
width: 0;
height: 0;
visibility: hidden;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 30px 0;
font-weight: 300;
}
h1 { font-size: 34px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
#container {
width: 860px;
margin: 0 auto;
}
section {
position: relative;
height: 200px;
margin: 60px 0;
}
.section--white {
background-color: #FFFFFF;
}
.section--red {
background-color: #E74C3C;
}
.section--purple {
background-color: #D6A8E9;
}
.section--blue {
background-color: #33CCF7;
}
.section--yellow {
background-color: #F4E9B4;
}
.section--green {
background-color: #80D99D;
}
.section--cyan{
background-color: #80D99D;
}
.section--pale{
background-color: #F4E9B4;
}
.col_third section { margin: 0; }
.icn_red { color: #FF3D6A; }
.icn_purple { color: #9B59B6; }
.icn_blue{ color: #3498DB; }
.icn_yellow { color: #F1C40F; }
.icn_green { color: #80D99D; }
/*-=-=-=-=-=-=-=-=-=-*/
/* Wow Image */
/*-=-=-=-=-=-=-=-=-= */
.service-section {
margin: 20px 0;
position: relative;
overflow: hidden;
}
.wow_imgage {
position: relative;
float: left;
margin: 0 20px 20px 0;
width: 270px;
height: 180px;
}
.wow_imgage img {
border: 4px solid #e4e4e1;
}
/*-=-=-=-=-=-=-=-=-=-*/
/* Column Grids */
/*-=-=-=-=-=-=-=-=-= */
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
position: relative;
display:inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/*-=-=-=-=-=-=-=-=-=-*/
/* Links */
/*-=-=-=-=-=-=-=-=-= */
a { text-decoration: none; color: #666666;}
a:hover, a:active { outline: 0; color: #666666; }
Raw
styles
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://mynameismatthieu.com/WOW/css/libs/animate.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment