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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

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

Автор: Mary Lou

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

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

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

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

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