Bootstrap Snippet Lightweight Kinetic Scrolling / Parallax Plugin With jQuery

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
<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>
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
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;
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
/**
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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