افکت زیبا برای هاور - Stack Motion Hover ( نمونه 8)

تعرفه تبلیغات در سایت
عنوان عکس عنوان عکس عنوان عکس عنوان عکس
عنوان عکس عنوان عکس عنوان عکس عنوان عکس
عنوان عکس عنوان عکس عنوان عکس عنوان عکس
عنوان عکس عنوان عکس عنوان عکس عنوان عکس
عنوان عکس عنوان عکس عنوان عکس عنوان عکس

آرشیو مطالب

جستجوگر

امکانات وب

پر مخاطب ها

برچسب ها

;(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);

  • مطالب مرتبط
  • ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 22) : تبدیل Inspector به ویرایشگر قدرتمند
  • کدهای جذاب و دیدنی ( Load more content ) : ایده زیبا برای لود شدن محتوای جدید
  • کدهای جذاب و دیدنی ( Audio Visualizer2 ) : ایده سه بعدی زیبا برای پخش صدا و موسیقی
  • ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 21) : آموزش Code Coverage
  • کدهای جذاب و دیدنی ( chessboard vacuum ) : انیمیشن زیبا برای صفحه شطرنج
  • لباس نوزاد مناسب برای خواب
  • نویسنده : استخدام کار بازدید : 10 تاريخ : پنجشنبه 16 شهريور 1396 ساعت: 4:16
    برچسب‌ها : نمونه,

    آخرین مطالب

    خبرنامه

    عضویت

    نام کاربري :
    رمز عبور :