;( function( $, window, document, undefined ) { "use strict"; var pluginName = "windowScrollAction", defaults = { offset: 0.25 }, _wsa, _$window, _blur = 30, _scale = 1.1, _mob_breakpoint = 992; // The actual plugin constructor function Plugin ( element, options ) { _wsa = this; _wsa.element = element; _wsa.$el = $(element); _$window = $(window); _wsa.settings = $.extend( {}, defaults, options ); _wsa._defaults = defaults; _wsa._name = pluginName; _wsa.init(); } $.extend( Plugin.prototype, { init: function() { if(_$window.width() > _mob_breakpoint) { _wsa.start(); } }, start: function() { _wsa.$parent = _wsa.$el.parent(); _wsa.parentHeight = _wsa.$parent.height(); _wsa.elOffset = _wsa.parentHeight * _wsa.settings.offset; _wsa.parentOffset = _wsa.$parent.offset().top; _wsa.useScale = false; _wsa.useBlur = false; _wsa.blur = _wsa.$el.data('blur'); _wsa.scale = _wsa.$el.data('scale'); _wsa.parallax = _wsa.$el.data('parallax'); _wsa.initScaleValue = 1.05; if(typeof _wsa.scale !== typeof undefined && _wsa.scale !== false) { _wsa.scale = parseFloat(_wsa.scale); _wsa.scale -= 1; _wsa.useScale = true; } if(typeof _wsa.blur !== typeof undefined && _wsa.blur !== false) { _wsa.blur = parseFloat(_wsa.blur); _wsa.useBlur = true; } if(_wsa.parallax !== true) { _wsa.parallax = false; } if(_wsa.blur && !_wsa.scale) { _wsa.initScale = true; _wsa.initBlurScale(); } else { _wsa.initScale = false; } _wsa.setDefPosision(); _wsa.windowScroll(); }, initBlurScale: function() { if(_wsa.parallax) { _wsa.$el.css(_wsa.setTransObj('translate3d(0, ' + -_wsa.elOffset +'px, 0) scale('+_wsa.initScaleValue+')')); } else { _wsa.$el.css(_wsa.setTransObj('translate3d(0, 0, 0) scale('+_wsa.initScaleValue+')')); } }, setDefPosision: function() { if(!_wsa.initScale) { _wsa.$el.css(_wsa.setTransObj('translate3d(0, ' + -_wsa.elOffset +'px, 0)')); } _wsa.$el.css('height', _wsa.parentHeight*(1+_wsa.settings.offset*2)); }, windowScroll: function() { _wsa.fireEvent(_$window, 'scroll', function(e){ var scroll = $(document).scrollTop(), scrollPx, scrolledP, blurred, scaled; if(scroll > _wsa.parentOffset && scroll < _wsa.parentOffset + _wsa.parentHeight) { _wsa.scrolledP = 100 - (100*(_wsa.parentOffset + _wsa.parentHeight - scroll)/_wsa.parentHeight); _wsa.scrollPx = (scroll-_wsa.parentOffset)*(_wsa.settings.offset*2)-_wsa.elOffset; // console.log(_wsa.scrollPx); _wsa.blurScroll(); _wsa.transformScroll(); // _wsa.addParallax(); } else { _wsa.removeBlur(); // _wsa.removeParallax(); } }); }, addParallax: function() { if(_wsa.parallax) { _wsa.$el.addClass('bg-fixed'); } }, removeParallax: function() { if(_wsa.parallax) { _wsa.$el.removeClass('bg-fixed'); } }, blurScroll: function() { var blurred; if(_wsa.useBlur) { blurred = _wsa.blur*_wsa.scrolledP/100; _wsa.$el.css({ 'filter': 'blur('+blurred+'px)' }); } }, removeBlur: function() { if(_wsa.useBlur) { _wsa.$el.css({ 'filter': 'blur(0px)' }); } }, transformScroll: function() { var scaled, trans; if(_wsa.parallax || _wsa.useScale) { if(_wsa.parallax && _wsa.useScale) { scaled = 1 + ((_wsa.scale)*_wsa.scrolledP/100); trans = _wsa.setTransObj('translate3d(0, ' + _wsa.scrollPx +'px, 0) scale('+scaled+')'); } else if(_wsa.useScale) { trans = _wsa.setTransObj('translate3d(0, 0, 0) scale('+scaled+')'); } else { if(_wsa.initScale) { trans = _wsa.setTransObj('translate3d(0, ' + _wsa.scrollPx +'px, 0) scale('+_wsa.initScaleValue+')'); } else { trans = _wsa.setTransObj('translate3d(0, ' + _wsa.scrollPx +'px, 0)'); } } _wsa.$el.css(trans); } }, setTransObj: function(val){ var prefixes = ['-ms-', '-webkit-', '-moz-', ''], transObj = {}; for (var i = prefixes.length - 1; i >= 0; i--) { transObj[prefixes[i] + 'transform'] = val; } return transObj; }, fireEvent: function(el, evt, callback) { el.on(evt, {_wsa: _wsa}, function(e){ _wsa = e.data._wsa; callback(e); }); } }); $.fn[ pluginName ] = function( options ) { return this.each( function() { if ( !$.data( this, "plugin_" + pluginName ) ) { $.data( this, "plugin_" + pluginName, new Plugin( this, options ) ); } } ); }; } )( jQuery, window, document );