jquery-inertiaScroll/docs/jquery-inertiaScroll.js

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