Блог

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

Крутые эффекты при наведении с использованием 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
	});
};


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


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

Отправляем...

Скачайте наш бриф на разработку проекта

Введи Ваше имя, телефон, e-mail и наш специалист вышлет вам бриф на почту

Отправляя заявку вы даете соглашение на обработку ваших персональных данных. Политика конфиденциальности

×

Отправляем...

Обсудить проект

Оставьте свои контакты и мы свяжемся с Вами в ближайшее время.