;(function(window) {
'use strict';
/**
* StackFx: The parent class.
*/
function StackFx(el) {
this.DOM = {};
this.DOM.el = el;
this.DOM.stack = this.DOM.el.querySelector('.stack');
this.DOM.stackItems = [].slice.call(this.DOM.stack.children);
this.totalItems = this.DOM.stackItems.length;
this.DOM.img = this.DOM.stack.querySelector('.stack__figure > .stack__img');
this.DOM.caption = this.DOM.el.querySelector('.grid__item-caption');
this.DOM.title = this.DOM.caption.querySelector('.grid__item-title');
this.DOM.columns = {left: this.DOM.caption.querySelector('.column--left'), right: this.DOM.caption.querySelector('.column--right')};
}
StackFx.prototype._removeAnimeTargets = function() {
anime.remove(this.DOM.stackItems);
anime.remove(this.DOM.img);
anime.remove(this.DOM.title);
anime.remove(this.DOM.columns.left);
anime.remove(this.DOM.columns.right);
};
/************************************************************************
* CanopusFx.
************************************************************************/
function CanopusFx(el) {
StackFx.call(this, el);
this._initEvents();
}
CanopusFx.prototype = Object.create(StackFx.prototype);
CanopusFx.prototype.constructor = CanopusFx;
CanopusFx.prototype._initEvents = function() {
var self = this;
this._mouseenterFn = function() {
self._removeAnimeTargets();
self._in();
};
this._mouseleaveFn = function() {
self._removeAnimeTargets();
self._out();
};
this.DOM.stack.addEventListener('mouseenter', this._mouseenterFn);
this.DOM.stack.addEventListener('mouseleave', this._mouseleaveFn);
};
CanopusFx.prototype._in = function() {
var self = this;
this.DOM.stackItems.map(function(e, i) {
e.style.opacity = i !== self.totalItems - 1 ? 0 : 1
});
var self = this;
anime({
targets: this.DOM.stackItems,
translateZ: {
value: function(target, index, cnt) {
return -1*(cnt-index-1)*20;
},
duration: 800,
easing: 'easeOutExpo',
delay: function(target, index, cnt) {
return (cnt-index-1)*70 + 200;
}
},
translateY: [
{
value: function(target, index) {
return -1*index*20 - 30;
},
duration: 800,
delay: function(target, index, cnt) {
return (cnt-index-1)*70 + 200;
},
elasticity: 500
},
],
scaleY: [
{
value: function(target, index, cnt) {
return index === cnt-1 ? 0.6 : 1;
},
duration: 200,
easing: 'easeOutExpo'
},
{
value: 0.8,
duration: 800,
elasticity: 450
}
],
scaleX: [
{
value: function(target, index, cnt) {
return index === cnt-1 ? 1.1 : 1;
},
duration: 200,
easing: 'easeOutExpo'
},
{
value: 0.8,
duration: 800,
elasticity: 300
}
],
opacity: {
value: function(target, index, cnt) {
return index === cnt-1 ? 1 : [0,0.2*index+0.2];
},
duration: 200,
easing: 'linear',
delay: function(target, index, cnt) {
return (cnt-index-1)*70 + 200;
}
}
});
anime({
targets: this.DOM.img,
scale: [
{
value: 1.8,
duration: 200,
easing: 'easeOutExpo'
},
{
value: 0.7,
duration: 1100,
easing: 'easeOutExpo'
}
]
});
anime({
targets: [this.DOM.title, this.DOM.columns.left, this.DOM.columns.right],
duration: 1000,
easing: 'easeOutElastic',
translateY: -30,
delay: 200
});
};
CanopusFx.prototype._out = function() {
var self = this;
anime({
targets: this.DOM.stackItems,
duration: 500,
easing: 'easeOutExpo',
translateZ: 0,
translateY: 0,
scaleY: 1,
scaleX: 1,
opacity: function(target, index, cnt) {
return index !== cnt - 1 ? 0 : 1
}
});
anime({
targets: this.DOM.img,
duration: 500,
easing: 'easeOutExpo',
scale: 1
});
anime({
targets: [this.DOM.title, this.DOM.columns.left, this.DOM.columns.right],
duration: 500,
easing: 'easeOutExpo',
translateY: 0
});
};
window.CanopusFx = CanopusFx;
[].slice.call(document.querySelectorAll('.grid--effect-canopus > .grid__item')).forEach(function(stackEl) {
new CanopusFx(stackEl);
});
})(window);
سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید
برچسب : نمونه, نویسنده : استخدام کار 7learn بازدید : 232 تاريخ : پنجشنبه 16 شهريور 1396 ساعت: 4:16