эффект при наведении на JS и CSS3

Stack Motion эффект изображений при наведении на JavaScript и CSS3

Десять потрясающих 3-D эффектов при наведении, которые создают впечатление у пользователя, что изображения расположены в стопке и большом количестве. Смотрите демо страницу.

Автор использует плагин Anime.js, а также свой небольшой скрипт и возможности CSS3 – preserve-3d и transform-origin. Практических применений можно найти множество. Например: у Вас имеется страница с готовым фотоальбомов. Вы используете одну картинку в качестве превью и набрасываете ей один из эффектов, приведенных на демо страницу. В результате, у пользователя создается ощущение множественного выбора, который он и получает, кликнув на картинку.

Код для использования на личных проектов рекомендуется взять из исходных файлов (ссылка «Скачать» выше). Каждый отдельный блок с графиков оборачивается в следующую конструкцию:

где, grid grid—effect-vega – это общая обертка анимированных блоков, а класс grid__item grid__item—c1 задает вариант анимации при наведении. Также не забудьте подключить .js и .css файлы.

В поисках шаблона для сайта?