"Lightweight Kinetic Scrolling / Parallax Plugin With jQuery - inertia Scroll "
Bootstrap 3.3.0 Snippet by foysal991

<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"> <div id="box1" class="box" data-speed="1" data-margin="100"></div> <div id="box2" class="box" data-speed="7"></div> <div id="box3" class="box" data-speed="2"></div> <div id="box4" class="box" data-speed="5"></div> <div id="box5" class="box" data-speed="3" data-margin="200"></div> <div id="box6" class="box" data-speed="1"></div> <div id="box7" class="box" data-speed="2"></div> <div id="box8" class="box" data-speed="8"></div> <div id="box9" class="box" data-speed="1"></div> <div id="box10" class="box" data-speed="5"></div> </div> <script> $(function(){ $(".box").inertiaScroll({ parent: $("#content") }); $(".box").each(function(){ var speed = $(this).data("speed"); var height = $(this).height() + "px"; $(this).css("line-height",height).text(speed); }); }); </script>
body{ background: #ccc; } header{ height: 100px; background: #000; color:white; } footer{ height: 100px; background: #000; color:white; } .box{ position: relative; width: 100px; height: 100px; text-align:center; font-size:50px; } #box1{ background: blueviolet; width:300px; height:300px; margin: 100px 0 0 100px; } #box2{ background: lavender; width:220px; height:220px; margin: 30px 0 0 200px; } #box3{ background: forestgreen; width:200px; height:200px; margin: 20px 0 0 300px; } #box4{ background: gold; width:360px; height:360px; margin: 100px 0 0 400px; } #box5{ background: orangered; width:220px; height:220px; margin: 100px 0 0 500px; } #box6{ background: lightsalmon; width:120px; height:120px; margin: 100px 0 0 300px; } #box7{ background: papayawhip; width:370px; height:370px; margin: 100px 0 0 200px; } #box8{ background: lime; width:210px; height:210px; margin: 20px 0 0 400px; } #box9{ background: deeppink; width:330px; height:330px; margin: 100px 0 0 100px; } #box10{ background: dimgray; width:100px; height:100px; margin: 30px 0 0 200px; }
/** jquery-inertiaScroll Copyright(c) 2017 Go Nishiduka This software is released under the MIT License. http://opensource.org/licenses/mit-license.php Last Update: 2017-10-23 Version:1.1.1 */ 'use strict'; (function($){ $.fn.inertiaScroll = function(options){ ////////////////////////////////////////////////// // options ////////////////////////////////////////////////// var settings = $.extend({ parent: '', childDelta1: 0.02, childDelta2: 0.1, parentDelta: 0.08 }, options); ////////////////////////////////////////////////// // jqeury object ////////////////////////////////////////////////// var $window = $(window); var $body = $('body'); var $parent = settings.parent; var $child = this; ////////////////////////////////////////////////// // inertiaScroll childClass ////////////////////////////////////////////////// var ChildBox = function(elm, offset, speed, margin){ this.elm = elm; this.offset = offset !== undefined ? offset : 0; this.speed = speed !== undefined ? speed : 1; this.margin = margin !== undefined ? margin : 0; }; ChildBox.prototype.update = function(windowOffset,offsetBottom){ this.offset += (windowOffset * settings.childDelta1 * Number(this.speed) - this.offset) * settings.childDelta2; this.elm.css({transform:'translate3d(' + 0 + ',' + ( Number(this.margin) - Number(this.offset) ) + 'px ,' + 0 +')'}); }; ////////////////////////////////////////////////// // inertiaScroll parentClass ////////////////////////////////////////////////// var ParentBox = function(elm, offset, speed, margin){ ChildBox.apply(this,arguments); }; ParentBox.prototype = Object.create(ChildBox.prototype,{ constructor:{ value: ParentBox } }); ParentBox.prototype.update = function(windowOffset){ this.offset += (windowOffset - this.offset) * settings.parentDelta; this.elm.css({transform:'translate3d(' + 0 + ',' + (-this.offset) + 'px ,' + 0 + ')'}); }; ParentBox.prototype.setcss = function(){ this.elm.css({ 'width':'100%', 'position':'fixed' }); }; ////////////////////////////////////////////////// // make Object ////////////////////////////////////////////////// var Boxes = function(){ this.ChildBox = []; this.ChildBoxLength = 0; this.ParentBox = ''; this.windowHeight = 0; }; Boxes.prototype = { init:function(){ this.createElm($child,$parent); this.loop(); }, createElm:function(child,parent){ this.ParentBox = new ParentBox(parent,0,1); this.ParentBox.setcss(); this.boxArrayLength = child.length; for (var i = 0; i < this.boxArrayLength; i++) { var e = child.eq(i); var speed = e.data('speed'); var margin = e.data('margin'); this.ChildBox.push(new ChildBox(e,0,speed,margin)); } }, smoothScroll:function(){ var windowOffset = $window.scrollTop(); var offsetBottom = windowOffset + this.windowHeight; this.ParentBox.update(windowOffset); for (var i = 0; i < this.boxArrayLength; i++) { this.ChildBox[i].update(windowOffset,offsetBottom); } }, loop:function(){ this.smoothScroll(); window.requestAnimationFrame(this.loop.bind(this)); } }; ////////////////////////////////////////////////// // Done ////////////////////////////////////////////////// $(function(){ $body.height($parent.height()); var boxes = new Boxes(); boxes.init(); }); return this; }; })(jQuery);

Related: See More


Questions / Comments: