От автора: сегодня мы хотим поделиться с вами небольшой подборкой hover эффектов. Концепция взята с сайта Merci-Michel. Из-за «текучести» эффект смотрится очень красиво. Основная идея – показывать стек слоев за основным превью. Слои должны принимать главный цвет на изображении. После этого все быстро анимируется. Мы для анимации воспользуемся библиотекой anime.js.
Внимание: используются современные CSS свойства, работают только в современных браузерах.
Разметка и стили эффекта стека
Разметка элементов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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). Стили декоративных карточек стека и изображения:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.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; } |
Для некоторых эффектов понадобятся отдельные стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* Индивидуальные эффекты */ /* 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; } /* ... */ |
Пример анимации эффекта (когда курсор наводится на элемент и когда уходит с него):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
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
Источник: //tympanus.net/
Редакция: Команда webformyself.
