// 婊氬姩瑙﹀彂鍔ㄦ晥鎻掍欢 // 渚濊禆 jquery銆乼weenmax銆乼hrottle-debounce // attr: x y scale rotation skewX skewY xPercent yPercent autoAlpha delay repeat repeatDelay yoyo force3D transformOrigin perspective *cycle *overwrite // Linear, Back, Bounce, Circ, Cubic, Ease, EaseLookUp, Elastic, Expo, Power0, Power1, Power2, Power3, Power4, Quad, Quart, Quint, Sine, Strong, SlowMo, Stepped // ease.easeIn, ease.easeOut, ease.easeInOut ;(function($){ $.fn.xRoll = function(opt){ var def = { xclass: 'xtween', // 鍒拌揪瑙﹀彂鐐筩lass throttle: 250, // 鑺傛祦棰戠巼锛岄粯璁�250姣 debounce: 250, // 鍘绘姈棰戠巼锛岄粯璁�250姣 mobile: false, // 鏄惁鏀寔绉诲姩绔� ie8: 1, // 鏄惁鏀寔ie8 0-瀹屽叏涓嶆敮鎸� 1-涓嶆敮鎸佹彃浠跺姩鐢伙紙鏀寔瑙﹀彂xclass鍙婂洖璋冨嚱鏁帮級 2-涓嶆敮鎸佹彃浠跺姩鐢诲強瑙﹀彂xclass锛堜粎鏀寔鍥炶皟鍑芥暟锛� 3-涓嶆敮鎸佹彃浠跺姩鐢诲強鍥炶皟鍑芥暟锛堜粎鏀寔瑙﹀彂xclass锛� 4-瀹屽叏鏀寔 offset: 0, // 瑙﹀彂鐐瑰亸绉�(px) ratio: 0.3, // 瑙﹀彂浜庤鍙ｉ珮搴︾殑姣斾緥浣嶇疆锛岄粯璁よ鍙ｅ瀭鐩翠腑鐐�(濡傛灉婊氬姩鍒伴〉闈㈠簳閮ㄤ粛鏃犳硶瑙﹀彂姝ゅ€硷紝鍐呴儴浼氳绠椾竴涓复鐣屽€艰鐩栨鍊硷紝浠ヤ繚璇佸厓绱犳渶缁堜細绉诲姩鍒版寚瀹氫綅缃�) stepmode: false, // 璁惧畾杩愬姩妯″紡锛岄粯璁ゅ埌杈捐Е鍙戠偣鑷杩愬姩锛宼rue-姝ヨ繘妯″紡杩愬姩 duration: 1, // 璁惧畾鍔ㄧ敾鎸佺画鏃堕棿锛岄粯璁�1绉� stagger: -1, // target: true 鏃朵綔鐢ㄤ簬瀛愬厓绱犺繍鍔ㄩ棿闅旀椂闂达紝榛樿 搴忓垪杩愬姩 target: false, // 浠ョ埗绾т綅缃Е鍙戝瓙绾у姩鐢� true-鎵€鏈夊瓙鍏冪礌锛宖alse-鑷韩锛宑ss閫夋嫨鍣�-閫変腑鐨勫瓙闆� trans: {}, // 璁惧畾鍔ㄧ敾鍔ㄤ綔 onRoll: function(elm,rate){}, // 鍥炶皟鍑芥暟 onIn: function(elm){}, // 鍥炶皟鍑芥暟 onOut: function(elm){} // 鍥炶皟鍑芥暟 }; var opt = $.extend(def, opt); var wheight = $(window).height(); var bheight = $('body').height(); var wstop = $(window).scrollTop(); this.each(function(i){ var _this = $(this); if(typeof(_this.data('xr-progress')) !== "undefined"){ console.log('[xRoll] 閲嶅璋冪敤锛�'); return; }else{ _this.data('xr-progress', 0); } var _attr = { idx: i, height: _this.outerHeight(), top: _this.offset().top, progress: 0, // 鑾峰彇鑷畾涔夊睘鎬у€� mobile: _this.data('xr-mobile') || opt.mobile, ie8: typeof(_this.data('xr-ie8')) !== "undefined" ? _this.data('xr-ie8') : opt.ie8, offset: _this.data('xr-offset') || opt.offset, ratio: _this.data('xr-ratio') || opt.ratio, stepmode: _this.data('xr-stepmode') || opt.stepmode, duration: _this.data('xr-duration') || opt.duration, stagger: _this.data('xr-stagger') >= 0 ? _this.data('xr-stagger') : opt.stagger, target: _this.data('xr-target') || opt.target, trans: !!_this.data('xr-trans') ? eval('(' + _this.data('xr-trans') + ')') : {} }; if(!$.support.leadingWhitespace && !_attr.ie8) return; if(!_attr.mobile && device().isMobile) return; if(_attr.ratio > (bheight - _attr.top + _attr.offset)/wheight){ _attr.ratio = (bheight - _attr.top + _attr.offset)/wheight; } if(_attr.stagger < 0){ _attr.stagger = _attr.trans.delay ? _attr.duration + _attr.trans.delay : _attr.stagger = _attr.duration; } _attr.trans = _attr.trans.autoAlpha ? $.extend({}, true, opt.trans, _attr.trans) : $.extend({autoAlpha: 0}, true, opt.trans, _attr.trans); if(!$.support.leadingWhitespace && _attr.ie8 < 4){ _attr.trans = $.extend({}, _attr.trans, {autoAlpha: 1}); console.log(_attr.trans); } $(window).on('load', function(){ var _tm = new TimelineMax(); if(_attr.stepmode){ opt.throttle = 0; } Init(_tm); var throttled = null, debounced = null; if(opt.throttle > 0){ throttled = $.throttle(opt.throttle, function(){ scrollFn(_this, _attr, _tm); }); }else{ throttled = function(){ scrollFn(_this, _attr, _tm); }; } if(opt.debounce > 0){ debounced = $.debounce(opt.debounce, function(){ wheight = $(window).height(); bheight = $('body').height(); wstop = $(window).scrollTop(); scrollFn(_this, _attr, _tm); }); }else{ debounced = function(){ wheight = $(window).height(); bheight = $('body').height(); wstop = $(window).scrollTop(); scrollFn(_this, _attr, _tm); }; } $(window).on('scroll', throttled); $(window).on('resize orientationchange', debounced); }); function Init(tm){ wheight = $(window).height(); bheight = $('body').height(); wstop = $(window).scrollTop(); _attr.height = _this.outerHeight(); _attr.top = _this.offset().top; if(_attr.ratio > (bheight - _attr.top + _attr.offset)/wheight){ _attr.ratio = (bheight - _attr.top + _attr.offset)/wheight; } // 鍒ゆ柇濡傛灉鏄埗绾у氨杩愬姩鍏跺瓙闆嗘垨鎸囧畾鍚庝唬锛屽惁鍒欒繍鍔ㄥ厓绱犺嚜韬� if(_attr.target){ if(typeof _attr.target == 'boolean'){ tm.staggerFrom(_this.children(), _attr.duration, _attr.trans, _attr.stagger); }else if(typeof _attr.target == 'string'){ tm.staggerFrom(_this.find(_attr.target), _attr.duration, _attr.trans, _attr.stagger); } }else{ tm.from(_this, _attr.duration, _attr.trans); } tm.stop(); scrollFn(_this, _attr, tm); } }); function scrollFn(ele, attr, tm){ wstop = $(window).scrollTop(); attr.progress = (wstop + wheight - attr.top + attr.offset) / (wheight * attr.ratio); ele.data('xr-progress', attr.progress); opt.onRoll(ele, attr.progress); if(attr.stepmode){ if(attr.progress < 0){ if(ele.hasClass(opt.xclass)){ if(!$.support.leadingWhitespace){ switch(attr.ie8){ case 2: opt.onOut(ele); break; case 3: ele.removeClass(opt.xclass); break; default: ele.removeClass(opt.xclass); opt.onOut(ele); } }else{ ele.removeClass(opt.xclass); opt.onOut(ele); } } if(!$.support.leadingWhitespace){ if(attr.ie8 > 3){ tm.progress(0); } }else{ tm.progress(0); } }else{ if(attr.progress > 1){ if(!ele.hasClass(opt.xclass)){ if(!$.support.leadingWhitespace){ switch(attr.ie8){ case 2: opt.onIn(ele); break; case 3: ele.addClass(opt.xclass); break; default: ele.addClass(opt.xclass); opt.onIn(ele); } }else{ ele.addClass(opt.xclass); opt.onIn(ele); } } if(!$.support.leadingWhitespace){ if(attr.ie8 > 3){ tm.progress(1); } }else{ tm.progress(1); } }else{ if(!$.support.leadingWhitespace){ if(attr.ie8 > 3){ tm.progress(attr.progress); } }else{ tm.progress(attr.progress); } } } }else{ if(!ele.hasClass(opt.xclass)){ if(attr.progress >= 1){ if(!$.support.leadingWhitespace){ switch(attr.ie8){ case 1: ele.addClass(opt.xclass); opt.onIn(ele); break; case 2: opt.onIn(ele); break; case 3: ele.addClass(opt.xclass); break; default: ele.addClass(opt.xclass); tm.play(); opt.onIn(ele); } }else{ ele.addClass(opt.xclass); tm.play(); opt.onIn(ele); } } }else{ if(attr.progress < 0.1){ if(!$.support.leadingWhitespace){ switch(attr.ie8){ case 1: ele.removeClass(opt.xclass); opt.onOut(ele); break; case 2: opt.onOut(ele); break; case 3: ele.removeClass(opt.xclass); break; default: ele.removeClass(opt.xclass); tm.reverse(); opt.onOut(ele); } }else{ ele.removeClass(opt.xclass); tm.reverse(); opt.onOut(ele); } } } } } return this; }; })(jQuery);