Bootstrap Snippet Animations When You Scroll using HTML CSS Javascript

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 id="container">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- snipp1 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9155049400353686"
     data-ad-slot="4807425052"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
    <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>
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

"Animations When You Scroll "
Bootstrap 3.3.0 Snippet by mahesh749

Related: See More

Questions / Comments:

"Animations When You Scroll " Bootstrap 3.3.0 Snippet by mahesh749

Related: See More

Questions / Comments:

"Animations When You Scroll "
Bootstrap 3.3.0 Snippet by mahesh749