/*! * parallax-element.js * jQuery plugin to add parallax effect to individual elements * @author Shaun M. Baer * @url https://github.com/iamhexcoder/parallax-element * @license MIT */ (function( $, window, document, undefined ) { $.fn.parallaxElement = function(options) { /*! requestAnimationFrame Polyfill via Paul Irish: https://gist.github.com/paulirish/1579671 */ (function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id); }; } }()); /*! end requestAnimationFrame Polyfill */ var defaults = { defaultSpeed: 0.2, useOffset: true, defaultOffset: 200, disableMobile: false, minWidth: false }; var opts = $.extend( {}, defaults, options ); if( opts.disableMobile && /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { return false; } var windowYOffset = window.pageYOffset; var winHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight; var winWidth = "innerWidth" in window ? window.innerWidth : document.documentElement.clientWidth; var navToggle = $('#filter-toggle'); var winBottom = (windowYOffset + winHeight); var body = document.body; var html = document.documentElement; var docHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); $(window).on('resize', function(){ winHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight; winWidth = window.innerWidth; docHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); }); function runScrollElement(el) { var thisTop = el.offset().top; if( opts.useOffset && thisTop - opts.defaultOffset > ( winBottom ) ) { return false; } var speed = el.attr('data-speed') ? ( el.attr('data-speed') * -1 ) : ( opts.defaultSpeed * -1 ); var val; if(el.hasClass('scroll-start-zero')) { val = ( windowYOffset * speed ); } else { val = ( ( windowYOffset - thisTop ) + ( winHeight / 2 ) ) * speed; } if(val > docHeight) { val = docHeight; } var styleVal = 'translate3d( 0px, ' + val + 'px, 0px)'; el.css({ "-webkit-transform": styleVal, "-moz-transform": styleVal, "-ms-transform": styleVal, "-o-transform": styleVal, "transform": styleVal }); } var scrollEls = []; this.each( function(i) { scrollEls.push( $(this) ); }); window.addEventListener("load", function(){ if ( opts.minWidth && opts.minWidth > winWidth ) { $(this).removeAttr('style'); return false; } $.each(scrollEls, function(i, el) { windowYOffset = window.pageYOffset; winBottom = (windowYOffset + winHeight); runScrollElement(el); }); }); return document.addEventListener('scroll', function(){ if( opts.minWidth && opts.minWidth > winWidth ) { $(this).removeAttr('style'); return false; } $.each(scrollEls, function(i, el) { windowYOffset = window.pageYOffset; winBottom = (windowYOffset + winHeight); window.requestAnimationFrame( function() { runScrollElement(el); }); }); }); }; }( jQuery, window, document ));