"animation on scroll"
Bootstrap 3.3.0 Snippet by mahesh749

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*-=-=-=-=-=-=-=-=-=-*/
/* GENERAL STYLES */
/*-=-=-=-=-=-=-=-=-= */
body {
overflow: scroll;
font-family: "Open Sans", Arial, Helvetica;
text-align: center;
background-color: #1e202b;
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; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(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 = {};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: