<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"> <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/image_output/nightlife-q-c-600-300-6.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;"> <figure> <img src="http://lorempixel.com/image_output/nightlife-q-c-600-300-6.jpg" width="270" height="180"></img> </figure> </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;"> <figure> <img src="http://lorempixel.com/image_output/nightlife-q-c-600-300-6.jpg" width="270" height="180"></img> </figure> </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/image_output/nightlife-q-c-600-300-6.jpg" width="270" height="180"></img> </div> <div class="wow_imgage wow fadeInLeft" data-wow-delay="0.2s"> <img src="http://lorempixel.com/image_output/nightlife-q-c-600-300-6.jpg" width="270" height="180"></img> </div> <div class="wow_imgage end wow fadeInLeft" data-wow-delay="0.3s"> <img src="http://lorempixel.com/image_output/nightlife-q-c-600-300-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>

/*-=-=-=-=-=-=-=-=-=-*/ /* 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; } 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; }

(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();