Difference between revisions of "Template:Paris Bettencourt/parallax"

Line 1: Line 1:
−
/*!
+
/**
−
* parallax.js v1.3.1 (http://pixelcog.github.io/parallax.js/)
+
  * jQuery.enllax.js v1.1.0
−
* @copyright 2015 PixelCog, Inc.
+
  * https://github.com/mmkjony/enllax.js
−
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
+
  * demo: http://mmkjony.github.io/enllax.js/
−
  */
+
  *
 +
  * Copyright 2015, MMK Jony
 +
  * This content is released under the MIT license
 +
  **/
  
−
;(function ( $, window, document, undefined ) {
+
(function($){
−
 
+
    'use strict';
−
  // Polyfill for requestAnimationFrame
+
   
−
  // via: https://gist.github.com/paulirish/1579671
+
    $.fn.enllax = function(opt){
−
 
+
       
−
  (function() {
+
        var winHeight = $(window).height();
−
    var lastTime = 0;
+
        var docHeight = $(document).height();
−
    var vendors = ['ms', 'moz', 'webkit', 'o'];
+
       
−
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+
        var options = $.extend({
−
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+
            ratio: 0,
−
      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
+
            type: 'background', //foreground
−
                                || window[vendors[x]+'CancelRequestAnimationFrame'];
+
            direction: 'vertical' //horizontal
−
    }
+
        }, opt);
−
 
+
       
−
    if (!window.requestAnimationFrame)
+
        var elem = $('[data-enllax-ratio]');
−
      window.requestAnimationFrame = function(callback) {
+
       
−
        var currTime = new Date().getTime();
+
        elem.each(function(){
−
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+
            var ratio;
−
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+
            var type;
−
          timeToCall);
+
            var dir;
−
        lastTime = currTime + timeToCall;
+
            var $this = $(this);
−
        return id;
+
            var offset = $this.offset().top;
−
      };
+
            var height = $this.outerHeight();
−
 
+
            var dataRat = $this.data('enllax-ratio');
−
    if (!window.cancelAnimationFrame)
+
            var dataType = $this.data('enllax-type');
−
      window.cancelAnimationFrame = function(id) {
+
            var dataDir = $this.data('enllax-direction');
−
        clearTimeout(id);
+
           
−
      };
+
            if(dataRat) {
−
  }());
+
                ratio = dataRat;
−
 
+
            }
−
 
+
            else { ratio = options.ratio; }
−
  // Parallax Constructor
+
           
−
 
+
            if(dataType) {
−
  function Parallax(element, options) {
+
                type = dataType;
−
    var self = this;
+
            }
−
 
+
            else { type = options.type; }
−
    if (typeof options == 'object') {
+
           
−
      delete options.refresh;
+
            if(dataDir) {
−
      delete options.render;
+
                dir = dataDir;
−
      $.extend(this, options);
+
            }
−
    }
+
            else { dir = options.direction; }
−
 
+
           
−
    this.$element = $(element);
+
            var bgY = Math.round(offset * ratio);
−
 
+
            var transform = Math.round((offset - (winHeight / 2) + height) * ratio);
−
    if (!this.imageSrc && this.$element.is('img')) {
+
           
−
      this.imageSrc = this.$element.attr('src');
+
            if(type == 'background') {
−
    }
+
                if(dir == 'vertical') {
−
 
+
                    $this.css({
−
    var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];
+
                        'background-position': 'center ' + -bgY + 'px'
−
 
+
                    });
−
    if (positions.length < 1) {
+
                }
−
      positions.push('center');
+
                else if(dir == 'horizontal') {
−
    }
+
                    $this.css({
−
    if (positions.length == 1) {
+
                        'background-position': -bgY + 'px' + ' center'
−
      positions.push(positions[0]);
+
                    });
−
    }
+
                }
−
 
+
            }
−
    if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
+
            else if(type == 'foreground') {
−
      positions = [positions[1], positions[0]];
+
                if(dir == 'vertical') {
−
    }
+
                    $this.css({
−
 
+
                        '-webkit-transform': 'translateY(' + transform + 'px)',
−
    if (this.positionX != undefined) positions[0] = this.positionX.toLowerCase();
+
                        '-moz-transform': 'translateY(' + transform + 'px)',
−
    if (this.positionY != undefined) positions[1] = this.positionY.toLowerCase();
+
                        'transform': 'translateY(' + transform + 'px)'
−
 
+
                    });
−
    self.positionX = positions[0];
+
                }
−
    self.positionY = positions[1];
+
                else if(dir == 'horizontal') {
−
 
+
                    $this.css({
−
    if (this.positionX != 'left' && this.positionX != 'right') {
+
                        '-webkit-transform': 'translateX(' + transform + 'px)',
−
      if (isNaN(parseInt(this.positionX))) {
+
                        '-moz-transform': 'translateX(' + transform + 'px)',
−
        this.positionX = 'center';
+
                        'transform': 'translateX(' + transform + 'px)'
−
      } else {
+
                    });
−
        this.positionX = parseInt(this.positionX);
+
                }
−
      }
+
            }
−
    }
+
           
−
 
+
            $(window).on('scroll', function(){
−
    if (this.positionY != 'top' && this.positionY != 'bottom') {
+
                var scrolling = $(this).scrollTop();
−
      if (isNaN(parseInt(this.positionY))) {
+
               
−
        this.positionY = 'center';
+
                bgY = Math.round((offset - scrolling) * ratio);
−
      } else {
+
                transform = Math.round(((offset - (winHeight / 2) + height) - scrolling) * ratio);
−
        this.positionY = parseInt(this.positionY);
+
               
−
      }
+
                if(type == 'background') {
−
    }
+
                    if(dir == 'vertical') {
−
 
+
                        $this.css({
−
    this.position =
+
                            'background-position': 'center ' + -bgY + 'px'
−
      this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
+
                        });
−
      this.positionY + (isNaN(this.positionY)? '' : 'px');
+
                    }
−
 
+
                    else if(dir == 'horizontal') {
−
    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
+
                        $this.css({
−
      if (this.iosFix && !this.$element.is('img')) {
+
                            'background-position': -bgY + 'px' + ' center'
−
        this.$element.css({
+
                        });
−
          backgroundImage: 'url(' + this.imageSrc + ')',
+
                    }
−
          backgroundSize: 'cover',
+
                }
−
          backgroundPosition: this.position
+
                else if((type == 'foreground') && (scrolling < docHeight)) {
 +
                    if(dir == 'vertical') {
 +
                        $this.css({
 +
                            '-webkit-transform': 'translateY(' + transform + 'px)',
 +
                            '-moz-transform': 'translateY(' + transform + 'px)',
 +
                            'transform': 'translateY(' + transform + 'px)'
 +
                        });
 +
                    }
 +
                    else if(dir == 'horizontal') {
 +
                        $this.css({
 +
                            '-webkit-transform': 'translateX(' + transform + 'px)',
 +
                            '-moz-transform': 'translateX(' + transform + 'px)',
 +
                            'transform': 'translateX(' + transform + 'px)'
 +
                        });
 +
                    }
 +
                }
 +
            });
 
         });
 
         });
−
      }
+
          
−
      return this;
+
     };
−
    }
+
      
−
 
+
})(jQuery);
−
    if (navigator.userAgent.match(/(Android)/)) {
+
−
      if (this.androidFix && !this.$element.is('img')) {
+
−
         this.$element.css({
+
−
          backgroundImage: 'url(' + this.imageSrc + ')',
+
−
          backgroundSize: 'cover',
+
−
          backgroundPosition: this.position
+
−
        });
+
−
      }
+
−
      return this;
+
−
     }
+
−
 
+
−
    this.$mirror = $('<div />').prependTo('body');
+
−
     this.$slider = $('<img />').prependTo(this.$mirror);
+
−
 
+
−
    this.$mirror.addClass('parallax-mirror').css({
+
−
      visibility: 'hidden',
+
−
      zIndex: this.zIndex,
+
−
      position: 'fixed',
+
−
      top: 0,
+
−
      left: 0,
+
−
      overflow: 'hidden'
+
−
    });
+
−
 
+
−
    this.$slider.addClass('parallax-slider').one('load', function() {
+
−
      if (!self.naturalHeight || !self.naturalWidth) {
+
−
        self.naturalHeight = this.naturalHeight || this.height || 1;
+
−
        self.naturalWidth  = this.naturalWidth  || this.width  || 1;
+
−
      }
+
−
      self.aspectRatio = self.naturalWidth / self.naturalHeight;
+
−
 
+
−
      Parallax.isSetup || Parallax.setup();
+
−
      Parallax.sliders.push(self);
+
−
      Parallax.isFresh = false;
+
−
      Parallax.requestRender();
+
−
    });
+
−
 
+
−
    this.$slider[0].src = this.imageSrc;
+
−
 
+
−
    if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete) {
+
−
      this.$slider.trigger('load');
+
−
    }
+
−
 
+
−
  };
+
−
 
+
−
 
+
−
  // Parallax Instance Methods
+
−
 
+
−
  $.extend(Parallax.prototype, {
+
−
    speed:    0.2,
+
−
    bleed:    0,
+
−
    zIndex:  -100,
+
−
    iosFix:  true,
+
−
    androidFix: true,
+
−
    position: 'center',
+
−
    overScrollFix: false,
+
−
 
+
−
    refresh: function() {
+
−
      this.boxWidth        = this.$element.outerWidth();
+
−
      this.boxHeight      = this.$element.outerHeight() + this.bleed * 2;
+
−
      this.boxOffsetTop    = this.$element.offset().top - this.bleed;
+
−
      this.boxOffsetLeft  = this.$element.offset().left;
+
−
      this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
+
−
 
+
−
      var winHeight = Parallax.winHeight;
+
−
      var docHeight = Parallax.docHeight;
+
−
      var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
+
−
      var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
+
−
      var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
+
−
      var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
+
−
 
+
−
      if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
+
−
        this.imageWidth    = imageHeightMin * this.aspectRatio | 0;
+
−
        this.imageHeight  = imageHeightMin;
+
−
        this.offsetBaseTop = imageOffsetMin;
+
−
 
+
−
        var margin = this.imageWidth - this.boxWidth;
+
−
 
+
−
        if (this.positionX == 'left') {
+
−
          this.offsetLeft = 0;
+
−
        } else if (this.positionX == 'right') {
+
−
          this.offsetLeft = - margin;
+
−
        } else if (!isNaN(this.positionX)) {
+
−
          this.offsetLeft = Math.max(this.positionX, - margin);
+
−
        } else {
+
−
          this.offsetLeft = - margin / 2 | 0;
+
−
        }
+
−
      } else {
+
−
        this.imageWidth    = this.boxWidth;
+
−
        this.imageHeight  = this.boxWidth / this.aspectRatio | 0;
+
−
        this.offsetLeft    = 0;
+
−
 
+
−
        var margin = this.imageHeight - imageHeightMin;
+
−
 
+
−
        if (this.positionY == 'top') {
+
−
          this.offsetBaseTop = imageOffsetMin;
+
−
        } else if (this.positionY == 'bottom') {
+
−
          this.offsetBaseTop = imageOffsetMin - margin;
+
−
        } else if (!isNaN(this.positionY)) {
+
−
          this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
+
−
        } else {
+
−
          this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
+
−
        }
+
−
      }
+
−
    },
+
−
 
+
−
    render: function() {
+
−
      var scrollTop    = Parallax.scrollTop;
+
−
      var scrollLeft  = Parallax.scrollLeft;
+
−
      var overScroll  = this.overScrollFix ? Parallax.overScroll : 0;
+
−
      var scrollBottom = scrollTop + Parallax.winHeight;
+
−
 
+
−
      if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop < scrollBottom) {
+
−
        this.visibility = 'visible';
+
−
      } else {
+
−
        this.visibility = 'hidden';
+
−
      }
+
−
      this.mirrorTop = this.boxOffsetTop  - scrollTop;
+
−
      this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
+
−
      this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
+
−
 
+
−
      this.$mirror.css({
+
−
        transform: 'translate3d(0px, 0px, 0px)',
+
−
        visibility: this.visibility,
+
−
        top: this.mirrorTop - overScroll,
+
−
        left: this.mirrorLeft,
+
−
        height: this.boxHeight,
+
−
        width: this.boxWidth
+
−
      });
+
−
 
+
−
      this.$slider.css({
+
−
        transform: 'translate3d(0px, 0px, 0px)',
+
−
        position: 'absolute',
+
−
        top: this.offsetTop,
+
−
        left: this.offsetLeft,
+
−
        height: this.imageHeight,
+
−
        width: this.imageWidth,
+
−
        maxWidth: 'none'
+
−
      });
+
−
    }
+
−
  });
+
−
 
+
−
 
+
−
  // Parallax Static Methods
+
−
 
+
−
  $.extend(Parallax, {
+
−
    scrollTop:    0,
+
−
    scrollLeft:  0,
+
−
    winHeight:    0,
+
−
    winWidth:    0,
+
−
    docHeight:    1 << 30,
+
−
    docWidth:    1 << 30,
+
−
    sliders:      [],
+
−
    isReady:      false,
+
−
    isFresh:      false,
+
−
    isBusy:      false,
+
−
 
+
−
    setup: function() {
+
−
      if (this.isReady) return;
+
−
 
+
−
      var $doc = $(document), $win = $(window);
+
−
 
+
−
      $win.on('scroll.px.parallax load.px.parallax', function() {
+
−
          var scrollTopMax  = Parallax.docHeight - Parallax.winHeight;
+
−
          var scrollLeftMax = Parallax.docWidth  - Parallax.winWidth;
+
−
          Parallax.scrollTop  = Math.max(0, Math.min(scrollTopMax,  $win.scrollTop()));
+
−
          Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
+
−
          Parallax.overScroll = Math.max($win.scrollTop() - scrollTopMax, Math.min($win.scrollTop(), 0));
+
−
          Parallax.requestRender();
+
−
        })
+
−
        .on('resize.px.parallax load.px.parallax', function() {
+
−
          Parallax.winHeight = $win.height();
+
−
          Parallax.winWidth  = $win.width();
+
−
          Parallax.docHeight = $doc.height();
+
−
          Parallax.docWidth  = $doc.width();
+
−
          Parallax.isFresh = false;
+
−
          Parallax.requestRender();
+
−
        });
+
−
 
+
−
      this.isReady = true;
+
−
    },
+
−
 
+
−
    configure: function(options) {
+
−
      if (typeof options == 'object') {
+
−
        delete options.refresh;
+
−
        delete options.render;
+
−
        $.extend(this.prototype, options);
+
−
      }
+
−
    },
+
−
 
+
−
    refresh: function() {
+
−
      $.each(this.sliders, function(){ this.refresh() });
+
−
      this.isFresh = true;
+
−
    },
+
−
 
+
−
    render: function() {
+
−
      this.isFresh || this.refresh();
+
−
      $.each(this.sliders, function(){ this.render() });
+
−
    },
+
−
 
+
−
    requestRender: function() {
+
−
      var self = this;
+
−
 
+
−
      if (!this.isBusy) {
+
−
        this.isBusy = true;
+
−
        window.requestAnimationFrame(function() {
+
−
          self.render();
+
−
          self.isBusy = false;
+
−
        });
+
−
      }
+
−
    }
+
−
  });
+
−
 
+
−
 
+
−
  // Parallax Plugin Definition
+
−
 
+
−
  function Plugin(option) {
+
−
    return this.each(function () {
+
−
      var $this = $(this);
+
−
      var options = typeof option == 'object' && option;
+
−
 
+
−
      if (this == window || this == document || $this.is('body')) {
+
−
        Parallax.configure(options);
+
−
      }
+
−
      else if (!$this.data('px.parallax')) {
+
−
        options = $.extend({}, $this.data(), options);
+
−
        $this.data('px.parallax', new Parallax(this, options));
+
−
      }
+
−
      if (typeof option == 'string') {
+
−
        Parallax[option]();
+
−
      }
+
−
    })
+
−
  };
+
−
 
+
−
  var old = $.fn.parallax;
+
−
 
+
−
  $.fn.parallax            = Plugin;
+
−
  $.fn.parallax.Constructor = Parallax;
+
−
 
+
−
 
+
−
  // Parallax No Conflict
+
−
 
+
−
  $.fn.parallax.noConflict = function () {
+
−
    $.fn.parallax = old;
+
−
    return this;
+
−
  };
+
−
 
+
−
 
+
−
  // Parallax Data-API
+
−
 
+
−
  $(document).on('ready.px.parallax.data-api', function () {
+
−
    $('[data-parallax="scroll"]').parallax();
+
−
  });
+
−
 
+
−
}(jQuery, window, document));
+

Revision as of 20:12, 1 September 2015

/** 

 * jQuery.enllax.js v1.1.0
 * https://github.com/mmkjony/enllax.js
 * demo: http://mmkjony.github.io/enllax.js/
 *
 * Copyright 2015, MMK Jony
 * This content is released under the MIT license
**/

(function($){ 

   'use strict';
   
   $.fn.enllax = function(opt){
       
       var winHeight = $(window).height();
       var docHeight = $(document).height();
       
       var options = $.extend({
           ratio: 0,
           type: 'background', //foreground
           direction: 'vertical' //horizontal
       }, opt);
       
       var elem = $('[data-enllax-ratio]');
       
       elem.each(function(){
           var ratio;
           var type;
           var dir;
           var $this = $(this);
           var offset = $this.offset().top;
           var height = $this.outerHeight();
           var dataRat = $this.data('enllax-ratio');
           var dataType = $this.data('enllax-type');
           var dataDir = $this.data('enllax-direction');
           
           if(dataRat) {
               ratio = dataRat;
           }
           else { ratio = options.ratio; }
           
           if(dataType) {
               type = dataType;
           }
           else { type = options.type; }
           
           if(dataDir) {
               dir = dataDir;
           }
           else { dir = options.direction; }
           
           var bgY = Math.round(offset * ratio);
           var transform = Math.round((offset - (winHeight / 2) + height) * ratio);
           
           if(type == 'background') {
               if(dir == 'vertical') {
                   $this.css({
                       'background-position': 'center ' + -bgY + 'px'
                   });
               }
               else if(dir == 'horizontal') {
                   $this.css({
                       'background-position': -bgY + 'px' + ' center'
                   });
               }
           }
           else if(type == 'foreground') {
               if(dir == 'vertical') {
                   $this.css({
                       '-webkit-transform': 'translateY(' + transform + 'px)',
                       '-moz-transform': 'translateY(' + transform + 'px)',
                       'transform': 'translateY(' + transform + 'px)'
                   });
               }
               else if(dir == 'horizontal') {
                   $this.css({
                       '-webkit-transform': 'translateX(' + transform + 'px)',
                       '-moz-transform': 'translateX(' + transform + 'px)',
                       'transform': 'translateX(' + transform + 'px)'
                   });
               }
           }
           
           $(window).on('scroll', function(){
               var scrolling = $(this).scrollTop();
               
               bgY = Math.round((offset - scrolling) * ratio);
               transform = Math.round(((offset - (winHeight / 2) + height) - scrolling) * ratio);
               
               if(type == 'background') {
                   if(dir == 'vertical') {
                       $this.css({
                           'background-position': 'center ' + -bgY + 'px'
                       });
                   }
                   else if(dir == 'horizontal') {
                       $this.css({
                           'background-position': -bgY + 'px' + ' center'
                       });
                   }
               }
               else if((type == 'foreground') && (scrolling < docHeight)) {
                   if(dir == 'vertical') {
                       $this.css({
                           '-webkit-transform': 'translateY(' + transform + 'px)',
                           '-moz-transform': 'translateY(' + transform + 'px)',
                           'transform': 'translateY(' + transform + 'px)'
                       });
                   }
                   else if(dir == 'horizontal') {
                       $this.css({
                           '-webkit-transform': 'translateX(' + transform + 'px)',
                           '-moz-transform': 'translateX(' + transform + 'px)',
                           'transform': 'translateX(' + transform + 'px)'
                       });
                   }
               }
           });
       });
       
   };

})(jQuery);