first-commit

README.md

@@ -1,2 +1,62 @@
 # jquery-inertiaScroll
 慣性スクロールのアニメーション用jQueryプラグイン
+
+
+## Demo
+<a href="http://underground0930.github.io/demo/inertial-scroll/" target="_blank">demo</a>
+
+##Depends
+* jQuery 1.9.1
+
+## Browsers
+IE10+ and other new browsers.
+
+## Options
+| key  | Value  | initial value |
+| :-----  | :----- | :----- |
+| parent | body直下のすべてのコンテンツを囲う要素を指定 | none |
+| childDelta1 | 少ないと滑らかになる、大きいと進みすぎるので注意 | 0.02 |
+| childDelta2 | 子要素のスクロールスピード、大きすぎると滑らかさが無くなる | 0.1 |
+| parentDelta | parentのスクロールスピード | 0.08 |
+
+## data Attribute
+| key  | Value  | initial value |
+| :-----  | :----- | :----- |
+| data-speed | 各要素のスクロールスピードを個別に変更出来る | 1 |
+| data-margin | 各要素のtranslate3dの値の切片を設定出来る | 0 |
+
+
+## Usage
+```
+  <div id="content">
+    <header>header!</header>
+    <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>
+    <footer>footer!</footer>
+  </div>
+
+
+	<script>
+	$(function(){
+
+	  $(".box").inertiaScroll({
+	    parent: $("#content")
+	  });
+
+	});  
+	</script>
+
+
+```
+
+## Lisence
+Copyright(c) 2016 Go Nishiduka
+Licensed under the MIT license.

jquery-inertiaScroll.js

@@ -0,0 +1,127 @@
+/**
+jquery-inertiaScroll
+
+Copyright(c) 2016 Go Nishiduka
+
+This software is released under the MIT License.
+http://opensource.org/licenses/mit-license.php
+
+Last Update: 2016-12-28
+Version:1.0.0
+*/
+
+(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 = 0, speed = 1, margin = 0){
+      this.elm = elm;
+      this.offset = offset;
+      this.speed = speed;
+      this.margin = margin;
+    }
+    ChildBox.prototype.update = function(windowOffset,offsetBottom = 0){
+        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 = 0, speed = 1.0, margin = 0){
+        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);