Крутые эффекты при наведении с использованием Anime.js

• 4137 просмотров

Крутые эффекты при наведении с использованием Anime.js

Сегодня мы хотели бы поделиться с вами некоторыми идеями крутых эффектов при наведении. Концепция основывается на эффекте зависания, который использовал Merci-Michel в своём портфолио. Эффект действительно обладает приятными ощущениями, благодаря торможению анимации.  Демонстрация результата доступна по ссылке.


Идея эффекта состоит в том, чтобы показать стопку за эскизом, который имеет тот же основной цвет, что и изображение, а затем анимировать элементы в быстром движении. Мы используем библиотеку JavaScript – Anime.js, для анимации.


Внимание! Мы использовали последние CSS3 свойства, поэтому наши демо не будут работать в старых браузерах.


HTML разметка для каждого нашего элемента будет одинаковая:

<div class="grid grid--effect-vega">
<a href="#" class="grid__item grid__item--c1">
<div class="stack">
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__deco"></div>
<div class="stack__figure">
<img class="stack__img" src="img/1.png" alt="Image"/>
</div>
</div>
<div class="grid__item-caption">
<h3 class="grid__item-title">anaerobic</h3>
<div class="column column--left">
<span class="column__text">Period</span>
<span class="column__text">Subjects</span>
<span class="column__text">Result</span>
</div>
<div class="column column--right">
<span class="column__text">2045</span>
<span class="column__text">133456</span>
<span class="column__text">Positive</span>
</div>
</div>
</a>
<a href="#" class="grid__item grid__item--c2"><!-- ... --></a>
<a href="#" class="grid__item grid__item--c2"><!-- ... --></a>
</div><!-- /grid -->

Как видно в куске кода выше, мы используем определенный класс сетки, для создания индивидуальных эффектов. Четыре элемента с классом stack_deco являются декоративными элементами, которые мы анимируем вместе с stack__figure и изображением. Сама сетка - это контейнер, который имеет перспективу. Заголовок сетки имеет заголовок и два столбца, которые также могут быть анимированы.

Для сетки мы используем раскладку flexbox. Для каждого элемента в демо примере мы будем использовать следующие стили:

.stack {
position: relative;
width: 100%;
height: 200px;
transform-style: preserve-3d;
}
.stack__deco {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: currentColor;
transform-origin: 50% 100%;
}
.stack__deco:first-child {
opacity: 0.2;
}
.stack__deco:nth-child(2) {
opacity: 0.4;
}
.stack__deco:nth-child(3) {
opacity: 0.6;
}
.stack__deco:nth-child(4) {
opacity: 0.8;
}
.stack__figure {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
height: 100%;
cursor: pointer;
transform-origin: 50% 100%;
}
.stack__img {
position: relative;
display: block;
flex: none;
}


Для некоторых эффектов мы хотим задать специальные CSS стили:

/* Individual effects */
/* Vega */
.grid--effect-vega .column {
opacity: 1;
}
/* deneb */
.grid--effect-deneb {
perspective: none;
}
.grid--effect-deneb .stack__figure,
.grid--effect-deneb .stack__deco {
transform-origin: 50% 50%;
}
.grid--effect-deneb .column {
opacity: 1;
}
/* ... */

А этот кусок JavaScript кода использует библиотеку Anime.js и используется для активации эффектов (при наведении и наоборот):

HamalFx.prototype._in = function() { var self = this;

this.DOM.stackItems.map(function(e, i) { e.style.opacity = i !== self.totalItems - 1 ? 0.2*i+0.2 : 1 });

anime({ targets: this.DOM.stackItems, duration: 1000, easing: 'easeOutExpo', translateY: function(target, index) { return -1*index*5; }, rotate: function(target, index, cnt) { if( index === cnt - 1 ) { return 0; } else { return index%2 ? (cnt-index)*1 : -1*(cnt-index)*1; } }, scale: function(target, index, cnt) { if( index === cnt - 1 ) { return 1; } else { return 1.05; } }, delay: function(target, index, cnt) { return (cnt-index-1)*30 } });

anime({ targets: this.DOM.img, duration: 1000, easing: 'easeOutExpo', scale: 0.7 });

anime({ targets: [this.DOM.columns.left, this.DOM.columns.right], duration: 1000, easing: 'easeOutExpo', translateX: function(target, index) { return index === 0 ? -30 : 30; } });

};

HamalFx.prototype._out = function() { var self = this;

anime({ targets: this.DOM.stackItems, duration: 500, easing: 'easeOutExpo', translateY: 0, rotate: 0, scale: 1, opacity: function(target, index, cnt) { return index !== cnt - 1 ? 0 : 1 } });

anime({ targets: this.DOM.img, duration: 1000, easing: 'easeOutElastic', scale: 1 });

anime({ targets: [this.DOM.columns.left, this.DOM.columns.right], duration: 500, easing: 'easeOutExpo', translateX: 0 }); };


Мы надеемся что Вам понравились наши эффекты и данная статья была для Вас полезной. Свои мысли и вопросы оставляйте в комментариях.


Оригинальная статья доступна по ссылке.

Интересуют наши услуги?
Оставьте заявку!
Отправляя форму, Вы даете согласие на обработку персональных данных. Мы гарантируем что ваши данные никогда не будут переданы третьим лицам.
Отправляем...