279 lines
12 KiB
JavaScript
279 lines
12 KiB
JavaScript
|
// 婊氬姩瑙﹀彂鍔ㄦ晥鎻掍欢
|
|||
|
|
// 渚濊禆 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, // 鑺傛祦棰戠巼锛岄粯璁<E7B2AF>250姣
|
|||
|
|
debounce: 250, // 鍘绘姈棰戠巼锛岄粯璁<E7B2AF>250姣
|
|||
|
|
mobile: false, // 鏄惁鏀寔绉诲姩绔<E5A7A9>
|
|||
|
|
ie8: 1, // 鏄惁鏀寔ie8 0-瀹屽叏涓嶆敮鎸<E695AE> 1-涓嶆敮鎸佹彃浠跺姩鐢伙紙鏀寔瑙﹀彂xclass鍙婂洖璋冨嚱鏁帮級 2-涓嶆敮鎸佹彃浠跺姩鐢诲強瑙﹀彂xclass锛堜粎鏀寔鍥炶皟鍑芥暟锛<E69A9F> 3-涓嶆敮鎸佹彃浠跺姩鐢诲強鍥炶皟鍑芥暟锛堜粎鏀寔瑙﹀彂xclass锛<73> 4-瀹屽叏鏀寔
|
|||
|
|
offset: 0, // 瑙﹀彂鐐瑰亸绉<E4BAB8>(px)
|
|||
|
|
ratio: 0.3, // 瑙﹀彂浜庤鍙ｉ珮搴︾殑姣斾緥浣嶇疆锛岄粯璁よ鍙ｅ瀭鐩翠腑鐐<E88591>(濡傛灉婊氬姩鍒伴〉闈㈠簳閮ㄤ粛鏃犳硶瑙﹀彂姝ゅ€硷紝鍐呴儴浼氳绠椾竴涓复鐣屽€艰鐩栨鍊硷紝浠ヤ繚璇佸厓绱犳渶缁堜細绉诲姩鍒版寚瀹氫綅缃<E7B685>)
|
|||
|
|
stepmode: false, // 璁惧畾杩愬姩妯″紡锛岄粯璁ゅ埌杈捐Е鍙戠偣鑷杩愬姩锛宼rue-姝ヨ繘妯″紡杩愬姩
|
|||
|
|
duration: 1, // 璁惧畾鍔ㄧ敾鎸佺画鏃堕棿锛岄粯璁<E7B2AF>1绉<31>
|
|||
|
|
stagger: -1, // target: true 鏃朵綔鐢ㄤ簬瀛愬厓绱犺繍鍔ㄩ棿闅旀椂闂达紝榛樿 搴忓垪杩愬姩
|
|||
|
|
target: false, // 浠ョ埗绾т綅缃Е鍙戝瓙绾у姩鐢<E5A7A9> true-鎵€鏈夊瓙鍏冪礌锛宖alse-鑷韩锛宑ss閫夋嫨鍣<E5ABA8>-閫変腑鐨勫瓙闆<E79399>
|
|||
|
|
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] 閲嶅璋冪敤锛<E695A4>');
|
|||
|
|
return;
|
|||
|
|
}else{
|
|||
|
|
_this.data('xr-progress', 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var _attr = {
|
|||
|
|
idx: i,
|
|||
|
|
height: _this.outerHeight(),
|
|||
|
|
top: _this.offset().top,
|
|||
|
|
progress: 0,
|
|||
|
|
// 鑾峰彇鑷畾涔夊睘鎬у€<D183>
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 鍒ゆ柇濡傛灉鏄埗绾у氨杩愬姩鍏跺瓙闆嗘垨鎸囧畾鍚庝唬锛屽惁鍒欒繍鍔ㄥ厓绱犺嚜韬<E59A9C>
|
|||
|
|
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);
|