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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Для создания отдельных эффектов мы используем определенный класс для сетки. Четыре разделителя stack__deco являются декоративными элементами, которые мы будем анимировать с изображением stack__figure. Сама сетка – это контейнер с перспективой. В подписи к сетке есть заголовок и две колонки, которые по желанию тоже можно анимировать.

Сетку раскладываем с помощью flexbox (см. demo.css). Стили декоративных карточек стека и изображения:

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

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

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

Автор: Mary Lou

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree