Эффекты стека при наведении курсора мыши

Эффекты стека при наведении курсора мыши

От автора: сегодня мы хотим поделиться с вами небольшой подборкой hover эффектов. Концепция взята с сайта Merci-Michel. Из-за «текучести» эффект смотрится очень красиво. Основная идея – показывать стек слоев за основным превью. Слои должны принимать главный цвет на изображении. После этого все быстро анимируется. Мы для анимации воспользуемся библиотекой anime.js.

Внимание: используются современные CSS свойства, работают только в современных браузерах.

скачать исходникидемо

Разметка и стили эффекта стека

Разметка элементов:

<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 (см. demo.css). Стили декоративных карточек стека и изображения:

.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;
}

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

/* Индивидуальные эффекты */

/* 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;
}

/* ... */

Пример анимации эффекта (когда курсор наводится на элемент и когда уходит с него):

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

Надеемся, вам понравились эти hover эффекты, и вы нашли в них вдохновение!

Автор: Mary Lou

Источник: https://tympanus.net/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по NodeJS. Основы

Прямо сейчас посмотрите курс по NodeJS!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree