forked from markdalgleish/stellar.js
-
Notifications
You must be signed in to change notification settings - Fork 4
/
jquery.stellar.min.js
9 lines (9 loc) · 12.7 KB
/
jquery.stellar.min.js
1
2
3
4
5
6
7
8
9
/*!
* Stellar.js v0.6.5
* http://markdalgleish.com/projects/stellar.js
*
* Copyright 2018, Mark Dalgleish
* This content is released under the MIT license
* http://markdalgleish.mit-license.org
*/
!function(e){"function"==typeof define&&define.amd?define(["jquery"],function(t){return e(t)}):"object"==typeof module&&"object"==typeof module.exports?exports=e(require("jquery")):e(jQuery)}(function(m){var o="stellar",i={scrollProperty:"scroll",positionProperty:"position",horizontalScrolling:!0,verticalScrolling:!0,horizontalOffset:0,verticalOffset:0,responsive:!1,parallaxBackgrounds:!0,parallaxElements:!0,hideDistantElements:!0,hideElement:function(t){t.hide()},showElement:function(t){t.show()}},s={scroll:{getLeft:function(t){return t.scrollLeft()},setLeft:function(t,e){t.scrollLeft(e)},getTop:function(t){return t.scrollTop()},setTop:function(t,e){t.scrollTop(e)}},position:{getLeft:function(t){return-1*parseInt(t.css("left"),10)},getTop:function(t){return-1*parseInt(t.css("top"),10)}},margin:{getLeft:function(t){return-1*parseInt(t.css("margin-left"),10)},getTop:function(t){return-1*parseInt(t.css("margin-top"),10)}},transform:{getLeft:function(t){var e=getComputedStyle(t[0])[n];return"none"!==e?-1*parseInt(e.match(/(-?[0-9]+)/g)[4],10):0},getTop:function(t){var e=getComputedStyle(t[0])[n];return"none"!==e?-1*parseInt(e.match(/(-?[0-9]+)/g)[5],10):0}}},a={position:{setLeft:function(t,e){t.css("left",e)},setTop:function(t,e){t.css("top",e)}},transform:{setPosition:function(t,e,i,o,s){t[0].style[n]="translate3d("+(e-i)+"px, "+(o-s)+"px, 0)"}}},n=function(){var t,e=/^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/,i=m("script")[0].style,o="";for(t in i)if(e.test(t)){o=t.match(e)[0];break}return"WebkitOpacity"in i&&(o="Webkit"),"KhtmlOpacity"in i&&(o="Khtml"),function(t){return o+(0<o.length?t.charAt(0).toUpperCase()+t.slice(1):t)}}()("transform"),t=void 0!==m("<div />",{style:"background:#fff"}).css("background-position-x"),v=t?function(t,e,i){t.css({"background-position-x":e,"background-position-y":i})}:function(t,e,i){t.css("background-position",e+" "+i)},L=t?function(t){return[t.css("background-position-x"),t.css("background-position-y")]}:function(t){return t.css("background-position").split(" ")},r=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){setTimeout(t,1e3/60)};function l(t,e){this.element=t,this.options=m.extend({},i,e),this._defaults=i,this._name=o,this.init()}l.prototype={init:function(){this.options.name=o+"_"+Math.floor(1e9*Math.random()),this._defineElements(),this._defineGetters(),this._defineSetters(),this._handleWindowLoadAndResize(),this._detectViewport(),this.refresh({firstLoad:!0}),"scroll"===this.options.scrollProperty?this._handleScrollEvent():this._startAnimationLoop()},_defineElements:function(){this.element===document.body&&(this.element=window),this.$scrollElement=m(this.element),this.$element=this.element===window?m("body"):this.$scrollElement,this.$viewportElement=void 0!==this.options.viewportElement?m(this.options.viewportElement):this.$scrollElement[0]===window||"scroll"===this.options.scrollProperty?this.$scrollElement:this.$scrollElement.parent()},_defineGetters:function(){var t=this,e=s[t.options.scrollProperty];this._getScrollLeft=function(){return e.getLeft(t.$scrollElement)},this._getScrollTop=function(){return e.getTop(t.$scrollElement)}},_defineSetters:function(){var n=this,t=s[n.options.scrollProperty],r=a[n.options.positionProperty],e=t.setLeft,i=t.setTop;this._setScrollLeft="function"==typeof e?function(t){e(n.$scrollElement,t)}:m.noop,this._setScrollTop="function"==typeof i?function(t){i(n.$scrollElement,t)}:m.noop,this._setPosition=r.setPosition||function(t,e,i,o,s){n.options.horizontalScrolling&&r.setLeft(t,e,i),n.options.verticalScrolling&&r.setTop(t,o,s)}},_handleWindowLoadAndResize:function(){var t=this,e=m(window);t.options.responsive&&e.bind("load."+this.name,function(){t.refresh()}),e.bind("resize."+this.name,function(){t._detectViewport(),t.options.responsive&&t.refresh()})},refresh:function(t){var i=this,e=i._getScrollLeft(),o=i._getScrollTop();t&&t.firstLoad||this._reset(),this._setScrollLeft(0),this._setScrollTop(0),this._setOffsets(),this._findParticles(),this._findBackgrounds(),t&&t.firstLoad&&/WebKit/.test(navigator.userAgent)&&m(window).on("load",function(){var t=i._getScrollLeft(),e=i._getScrollTop();i._setScrollLeft(t+1),i._setScrollTop(e+1),i._setScrollLeft(t),i._setScrollTop(e)}),this._setScrollLeft(e),this._setScrollTop(o)},_detectViewport:function(){var t=this.$viewportElement[0]!==window?this.$viewportElement.offset():{top:0,left:0},e=null!=t;this.viewportWidth=this.$viewportElement.width(),this.viewportHeight=this.$viewportElement.height(),this.viewportOffsetTop=e?t.top:0,this.viewportOffsetLeft=e?t.left:0},_findParticles:function(){var g=this;this._getScrollLeft(),this._getScrollTop();if(void 0!==this.particles)for(var t=this.particles.length-1;0<=t;t--)this.particles[t].$element.data("stellar-elementIsActive",void 0);this.particles=[],this.options.parallaxElements&&this.$element.find("[data-stellar-ratio]").each(function(t){var e,i,o,s,n,r,a,l,f,c=m(this),p=0,h=0,d=0,u=0;if(c.data("stellar-elementIsActive")){if(c.data("stellar-elementIsActive")!==this)return}else c.data("stellar-elementIsActive",this);g.options.showElement(c),c.data("stellar-startingLeft")?(c.css("left",c.data("stellar-startingLeft")),c.css("top",c.data("stellar-startingTop"))):(c.data("stellar-startingLeft",c.css("left")),c.data("stellar-startingTop",c.css("top"))),o=c.position().left,s=c.position().top,n="auto"===c.css("margin-left")?0:parseInt(c.css("margin-left"),10),r="auto"===c.css("margin-top")?0:parseInt(c.css("margin-top"),10),l=c.offset().left-n,f=c.offset().top-r,c.parents().each(function(){var t=m(this);if(!0===t.data("stellar-offset-parent"))return p=d,h=u,a=t,!1;d+=t.position().left,u+=t.position().top}),e=void 0!==c.data("stellar-horizontal-offset")?c.data("stellar-horizontal-offset"):void 0!==a&&void 0!==a.data("stellar-horizontal-offset")?a.data("stellar-horizontal-offset"):g.horizontalOffset,i=void 0!==c.data("stellar-vertical-offset")?c.data("stellar-vertical-offset"):void 0!==a&&void 0!==a.data("stellar-vertical-offset")?a.data("stellar-vertical-offset"):g.verticalOffset,g.particles.push({$element:c,$offsetParent:a,isFixed:"fixed"===c.css("position"),horizontalOffset:e,verticalOffset:i,startingPositionLeft:o,startingPositionTop:s,startingOffsetLeft:l,startingOffsetTop:f,parentOffsetLeft:p,parentOffsetTop:h,stellarRatio:void 0!==c.data("stellar-ratio")?c.data("stellar-ratio"):1,width:c.outerWidth(!0),height:c.outerHeight(!0),isHidden:!1})})},_findBackgrounds:function(){var t,d=this,u=this._getScrollLeft(),g=this._getScrollTop();this.backgrounds=[],this.options.parallaxBackgrounds&&(t=this.$element.find("[data-stellar-background-ratio]"),this.$element.data("stellar-background-ratio")&&(t=t.add(this.$element)),t.each(function(){var t,e,i,o,s,n,r,a=m(this),l=L(a),f=0,c=0,p=0,h=0;if(a.data("stellar-backgroundIsActive")){if(a.data("stellar-backgroundIsActive")!==this)return}else a.data("stellar-backgroundIsActive",this);a.data("stellar-backgroundStartingLeft")?v(a,a.data("stellar-backgroundStartingLeft"),a.data("stellar-backgroundStartingTop")):(a.data("stellar-backgroundStartingLeft",l[0]),a.data("stellar-backgroundStartingTop",l[1])),i="auto"===a.css("margin-left")?0:parseInt(a.css("margin-left"),10),o="auto"===a.css("margin-top")?0:parseInt(a.css("margin-top"),10),s=a.offset().left-i-u,n=a.offset().top-o-g,a.parents().each(function(){var t=m(this);if(!0===t.data("stellar-offset-parent"))return f=p,c=h,r=t,!1;p+=t.position().left,h+=t.position().top}),t=void 0!==a.data("stellar-horizontal-offset")?a.data("stellar-horizontal-offset"):void 0!==r&&void 0!==r.data("stellar-horizontal-offset")?r.data("stellar-horizontal-offset"):d.horizontalOffset,e=void 0!==a.data("stellar-vertical-offset")?a.data("stellar-vertical-offset"):void 0!==r&&void 0!==r.data("stellar-vertical-offset")?r.data("stellar-vertical-offset"):d.verticalOffset,d.backgrounds.push({$element:a,$offsetParent:r,isFixed:"fixed"===a.css("background-attachment"),horizontalOffset:t,verticalOffset:e,startingValueLeft:l[0],startingValueTop:l[1],startingBackgroundPositionLeft:isNaN(parseInt(l[0],10))?0:parseInt(l[0],10),startingBackgroundPositionTop:isNaN(parseInt(l[1],10))?0:parseInt(l[1],10),startingPositionLeft:a.position().left,startingPositionTop:a.position().top,startingOffsetLeft:s,startingOffsetTop:n,parentOffsetLeft:f,parentOffsetTop:c,stellarRatio:void 0===a.data("stellar-background-ratio")?1:a.data("stellar-background-ratio")})}))},_reset:function(){var t,e,i,o,s;for(s=this.particles.length-1;0<=s;s--)e=(t=this.particles[s]).$element.data("stellar-startingLeft"),i=t.$element.data("stellar-startingTop"),this._setPosition(t.$element,e,e,i,i),this.options.showElement(t.$element),t.$element.data("stellar-startingLeft",null).data("stellar-elementIsActive",null).data("stellar-backgroundIsActive",null);for(s=this.backgrounds.length-1;0<=s;s--)(o=this.backgrounds[s]).$element.data("stellar-backgroundStartingLeft",null).data("stellar-backgroundStartingTop",null),v(o.$element,o.startingValueLeft,o.startingValueTop)},destroy:function(){this._reset(),this.$scrollElement.unbind("resize."+this.name).unbind("scroll."+this.name),this._animationLoop=m.noop,m(window).unbind("load."+this.name).unbind("resize."+this.name)},_setOffsets:function(){var t=this,e=m(window);e.unbind("resize.horizontal-"+this.name).unbind("resize.vertical-"+this.name),"function"==typeof this.options.horizontalOffset?(this.horizontalOffset=this.options.horizontalOffset(),e.bind("resize.horizontal-"+this.name,function(){t.horizontalOffset=t.options.horizontalOffset()})):this.horizontalOffset=this.options.horizontalOffset,"function"==typeof this.options.verticalOffset?(this.verticalOffset=this.options.verticalOffset(),e.bind("resize.vertical-"+this.name,function(){t.verticalOffset=t.options.verticalOffset()})):this.verticalOffset=this.options.verticalOffset},_repositionElements:function(){var t,e,i,o,s,n,r,a,l,f,c=this._getScrollLeft(),p=this._getScrollTop(),h=!0,d=!0;if(this.currentScrollLeft!==c||this.currentScrollTop!==p||this.currentWidth!==this.viewportWidth||this.currentHeight!==this.viewportHeight){for(this.currentScrollLeft=c,this.currentScrollTop=p,this.currentWidth=this.viewportWidth,this.currentHeight=this.viewportHeight,f=this.particles.length-1;0<=f;f--)e=(t=this.particles[f]).isFixed?1:0,this.options.horizontalScrolling?a=(n=(c+t.horizontalOffset+this.viewportOffsetLeft+t.startingPositionLeft-t.startingOffsetLeft+t.parentOffsetLeft)*-(t.stellarRatio+e-1)+t.startingPositionLeft)-t.startingPositionLeft+t.startingOffsetLeft:(n=t.startingPositionLeft,a=t.startingOffsetLeft),this.options.verticalScrolling?l=(r=(p+t.verticalOffset+this.viewportOffsetTop+t.startingPositionTop-t.startingOffsetTop+t.parentOffsetTop)*-(t.stellarRatio+e-1)+t.startingPositionTop)-t.startingPositionTop+t.startingOffsetTop:(r=t.startingPositionTop,l=t.startingOffsetTop),this.options.hideDistantElements&&(d=!this.options.horizontalScrolling||a+t.width>(t.isFixed?0:c)&&a<(t.isFixed?0:c)+this.viewportWidth+this.viewportOffsetLeft,h=!this.options.verticalScrolling||l+t.height>(t.isFixed?0:p)&&l<(t.isFixed?0:p)+this.viewportHeight+this.viewportOffsetTop),d&&h?(t.isHidden&&(this.options.showElement(t.$element),t.isHidden=!1),this._setPosition(t.$element,n,t.startingPositionLeft,r,t.startingPositionTop)):t.isHidden||(this.options.hideElement(t.$element),t.isHidden=!0);for(f=this.backgrounds.length-1;0<=f;f--)e=(i=this.backgrounds[f]).isFixed?0:1,o=this.options.horizontalScrolling?(c+i.horizontalOffset-this.viewportOffsetLeft-i.startingOffsetLeft+i.parentOffsetLeft-i.startingBackgroundPositionLeft)*(e-i.stellarRatio)+"px":i.startingValueLeft,s=this.options.verticalScrolling?(p+i.verticalOffset-this.viewportOffsetTop-i.startingOffsetTop+i.parentOffsetTop-i.startingBackgroundPositionTop)*(e-i.stellarRatio)+"px":i.startingValueTop,v(i.$element,o,s)}},_handleScrollEvent:function(){var t=this,e=!1,i=function(){t._repositionElements(),e=!1},o=function(){e||(r(i),e=!0)};this.$scrollElement.bind("scroll."+this.name,o),o()},_startAnimationLoop:function(){var t=this;this._animationLoop=function(){r(t._animationLoop),t._repositionElements()},this._animationLoop()}},m.fn[o]=function(e){var i=arguments;return void 0===e||"object"==typeof e?this.each(function(){m.data(this,"plugin_"+o)||m.data(this,"plugin_"+o,new l(this,e))}):"string"==typeof e&&"_"!==e[0]&&"init"!==e?this.each(function(){var t=m.data(this,"plugin_"+o);t instanceof l&&"function"==typeof t[e]&&t[e].apply(t,Array.prototype.slice.call(i,1)),"destroy"===e&&m.data(this,"plugin_"+o,null)}):void 0},m[o]=function(t){var e=m(window);return e.stellar.apply(e,Array.prototype.slice.call(arguments,0))},m[o].scrollProperty=s,m[o].positionProperty=a,window.Stellar=l});