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