201 lines
7.8 KiB
JavaScript
201 lines
7.8 KiB
JavaScript
|
/**
|
||
|
|
* More animations
|
||
|
|
* @file animate.js
|
||
|
|
* @author BE-FE Team
|
||
|
|
* xieyu33333 xieyu33333@gmail.com
|
||
|
|
* shinate shine.wangrs@gmail.com
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function (global, factory) {
|
||
|
|
/* CommonJS */
|
||
|
|
if (typeof require === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports)
|
||
|
|
factory(require('./iSlider'));
|
||
|
|
/* AMD */
|
||
|
|
else if (typeof define === 'function' && define['amd'])
|
||
|
|
define(['./iSlider'], function (iSlider) {
|
||
|
|
factory(iSlider);
|
||
|
|
});
|
||
|
|
/* Global */
|
||
|
|
else
|
||
|
|
factory(global['iSlider']);
|
||
|
|
|
||
|
|
})(window ? window : this, function (iSlider) {
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
iSlider && iSlider.extend(iSlider._animateFuncs, {
|
||
|
|
// rotate
|
||
|
|
rotate: (function () {
|
||
|
|
function rotate(dom, axis, scale, i, offset, direct) {
|
||
|
|
var rotateDirect = (axis === 'X') ? 'Y' : 'X';
|
||
|
|
|
||
|
|
if (this.isVertical) {
|
||
|
|
offset = -offset;
|
||
|
|
if (Math.abs(direct) > 1) {
|
||
|
|
direct = -direct;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var outer = dom.parentElement;
|
||
|
|
iSlider.setStyle(outer, 'perspective', scale * 4);
|
||
|
|
|
||
|
|
dom.style.visibility = 'visible';
|
||
|
|
if (direct > 0 && i === 2) {
|
||
|
|
dom.style.visibility = 'hidden';
|
||
|
|
}
|
||
|
|
if (direct < 0 && i === 0) {
|
||
|
|
dom.style.visibility = 'hidden';
|
||
|
|
}
|
||
|
|
dom.style.zIndex = i === 1 ? 1 : 0;
|
||
|
|
|
||
|
|
dom.style.cssText += iSlider.styleProp('backface-visibility') + ':hidden;' + iSlider.styleProp('transform-style') + ':preserve-3d;' + 'position:absolute;';
|
||
|
|
|
||
|
|
// TODO: overflow... I dont understand why there are many differences between ios and desktop. Maybe they have different interpretations of Perspective
|
||
|
|
iSlider.setStyle(dom, 'transform', 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ(' + (0.889 * scale / 2) + 'px) scale(0.889)');
|
||
|
|
}
|
||
|
|
|
||
|
|
rotate.effect = iSlider.styleProp('transform');
|
||
|
|
rotate.reverse = true;
|
||
|
|
return rotate;
|
||
|
|
})(),
|
||
|
|
// flip
|
||
|
|
flip: (function () {
|
||
|
|
function flip(dom, axis, scale, i, offset, direct) {
|
||
|
|
if (this.isVertical) {
|
||
|
|
offset = -offset;
|
||
|
|
}
|
||
|
|
|
||
|
|
var outer = dom.parentElement;
|
||
|
|
iSlider.setStyle(outer, 'perspective', scale * 4);
|
||
|
|
|
||
|
|
dom.style.visibility = 'visible';
|
||
|
|
if (direct > 0 && i === 2) {
|
||
|
|
dom.style.visibility = 'hidden';
|
||
|
|
}
|
||
|
|
if (direct < 0 && i === 0) {
|
||
|
|
dom.style.visibility = 'hidden';
|
||
|
|
}
|
||
|
|
|
||
|
|
dom.style.cssText += 'position:absolute;' + iSlider.styleProp('backface-visibility') + ':hidden';
|
||
|
|
iSlider.setStyle(dom, 'transform', 'translateZ(' + (scale / 2) + 'px) rotate' + ((axis === 'X') ? 'Y' : 'X') + '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)');
|
||
|
|
}
|
||
|
|
|
||
|
|
flip.effect = iSlider.styleProp('transform');
|
||
|
|
flip.reverse = true;
|
||
|
|
return flip;
|
||
|
|
})(),
|
||
|
|
depth: (function () {
|
||
|
|
|
||
|
|
function depth(dom, axis, scale, i, offset, direct) {
|
||
|
|
var zoomScale = (4 - Math.abs(i - 1)) * 0.18;
|
||
|
|
var outer = dom.parentElement;
|
||
|
|
iSlider.setStyle(outer, 'perspective', scale * 4);
|
||
|
|
dom.style.zIndex = i === 1 ? 1 : 0;
|
||
|
|
iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)');
|
||
|
|
}
|
||
|
|
|
||
|
|
depth.effect = iSlider.styleProp('transform');
|
||
|
|
return depth;
|
||
|
|
})(),
|
||
|
|
flow: (function () {
|
||
|
|
function flow(dom, axis, scale, i, offset, direct) {
|
||
|
|
var absoluteOffset = Math.abs(offset);
|
||
|
|
var rotateDirect = (axis === 'X') ? 'Y' : 'X';
|
||
|
|
var directAmend = (axis === 'X') ? 1 : -1;
|
||
|
|
var offsetRatio = Math.abs(offset / scale);
|
||
|
|
var outer = dom.parentElement;
|
||
|
|
|
||
|
|
iSlider.setStyle(outer, 'perspective', scale * 4);
|
||
|
|
|
||
|
|
if (i === 1) {
|
||
|
|
dom.style.zIndex = scale - absoluteOffset;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset : (i - 1) * absoluteOffset;
|
||
|
|
}
|
||
|
|
|
||
|
|
iSlider.setStyle(dom, 'transform', 'scale(0.7, 0.7) translateZ(' + (offsetRatio * 150 - 150) * Math.abs(i - 1) + 'px)' + 'translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)' + 'rotate' + rotateDirect + '(' + directAmend * (30 - offsetRatio * 30) * (1 - i) + 'deg)');
|
||
|
|
}
|
||
|
|
|
||
|
|
flow.effect = iSlider.styleProp('transform');
|
||
|
|
return flow;
|
||
|
|
})(),
|
||
|
|
card: (function () {
|
||
|
|
function card(dom, axis, scale, i, offset, direct) {
|
||
|
|
var absoluteOffset = Math.abs(offset);
|
||
|
|
var zoomScale = 1;
|
||
|
|
var z = 1;
|
||
|
|
|
||
|
|
if (absoluteOffset > 0) {
|
||
|
|
if (i === 1) {
|
||
|
|
zoomScale = 1 - 0.2 * Math.abs(i - 1) - Math.abs(0.2 * offset / scale).toFixed(6);
|
||
|
|
z = 0;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (i !== 1) {
|
||
|
|
if ((direct > 0 && i === 0) || (direct < 0 && i === 2)) {
|
||
|
|
zoomScale = 1 - 0.2 * Math.abs(i - 1);
|
||
|
|
}
|
||
|
|
z = 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
dom.style.zIndex = z;
|
||
|
|
iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + ((1 + Math.abs(i - 1) * 0.2) * offset + scale * (i - 1)) + 'px)');
|
||
|
|
}
|
||
|
|
|
||
|
|
card.effect = iSlider.styleProp('transform');
|
||
|
|
return card;
|
||
|
|
})(),
|
||
|
|
fade: (function () {
|
||
|
|
function fade(dom, axis, scale, i, offset, direct) {
|
||
|
|
dom.style.zIndex = i === 1 ? 1 : 0;
|
||
|
|
offset = Math.abs(offset);
|
||
|
|
if (i === 1) {
|
||
|
|
dom.style.opacity = 1 - (offset / scale);
|
||
|
|
} else {
|
||
|
|
dom.style.opacity = offset / scale;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
fade.effect = 'opacity';
|
||
|
|
return fade;
|
||
|
|
})(),
|
||
|
|
zoomout: (function () {
|
||
|
|
var lsn;
|
||
|
|
|
||
|
|
function zoomout(dom, axis, scale, i, offset) {
|
||
|
|
var z, o, s;
|
||
|
|
|
||
|
|
var oa = offset / scale;
|
||
|
|
switch (i) {
|
||
|
|
case 0:
|
||
|
|
lsn && window.clearTimeout(lsn);
|
||
|
|
o = oa < 1 ? oa : 1;
|
||
|
|
s = 2 - (0.5 * oa);
|
||
|
|
z = 2;
|
||
|
|
var at = parseInt(window.getComputedStyle(dom)[iSlider.styleProp('transitionDuration', 1)]) * 1000;
|
||
|
|
if (at > 0) {
|
||
|
|
lsn = window.setTimeout(function () {
|
||
|
|
dom.style.zIndex = 0;
|
||
|
|
}, at);
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
o = 1 - oa;
|
||
|
|
s = 1 - (0.5 * oa);
|
||
|
|
z = 1;
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
o = oa > 0 ? oa : 0;
|
||
|
|
s = 0.5 - (0.5 * oa);
|
||
|
|
z = 0;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
dom.style.cssText += 'z-index:' + z + ';opacity:' + o + ';' + iSlider.styleProp('transform') + ':scale(' + s + ');';
|
||
|
|
}
|
||
|
|
|
||
|
|
zoomout.reverse = true;
|
||
|
|
return zoomout;
|
||
|
|
})()
|
||
|
|
});
|
||
|
|
});
|