Урок 2: Cоздание 3D hover эффектов для миниатюр

Опубликовал: 5 лет назад CSS, Уроки

Добрый день дорогие друзья. Сегодня мы с Вами  научимся создавать 3D-галерею с использованием hover-эффектов. Это будет не сильно сложно. Так что быстренько приступаем к работе. Подробности как всегда в полной версии поста. Ныряем...

Мануал о том, как создать CSS3 эффекты для 3D-миниатюр при наведении на них мышкой, показать Вам эффекты CSS преобразования c использованием JQuery.

Демо
В мануале используются фотографии обработанные в Photoshop с помощью action в стиле Instagram. Я писал вам о том, что скоро доделаю сборку action и выложу. Вы сможете обрабатывать фотографии около 100 вариантами эффектов, но об этом позже Вы узнаете в блоге.

Создаем разметку HTML


Давайте создадим для наших миниатюр структуру. Которая будет иметь вид:

Каждую миниатюру мы заключаем в отдельный div элемент, в который включаем еще один div элемент для дополнительной информации (view-back). Для каждого элемента div с классом (view) структура будет создаваться при помощи JavaScript:

Для каждого слоя имеется соответствующее изображение в качестве фона.У нас получается вложенная структура — это позволяет контролировать нам эффекты. Для придания эффекта реалистичности мы используем дополнительный покрывающий элемент span.

Теперь взглянем на наш код JavaScript:

Теперь можно приступить к эффектам для событий. Определим для начала общие стили.

Переходим к CSS


Определим стили для элемента <strong>div</strong> (<em>view</em>). Добавляем перспективу:

Добавляем для слоев несколько 3D свойст и переход:

При сдвиге слоя у нас показывается часть описания. Для нее тоже определим стили:

Теперь пришло время задать стили для наших элементов span и для ссылок:

Мы будем использовать для иконок размещенных перед элементом span — специальный шрифт, который создан с помощью сервиса Fontello. Так как мы добавляем атрибут data-icon к элементу, то будем использовать псевдо-класс :before для вывода:

Так как у нас построена вложенная структура то, все наши слои, кроме первого, нужно сдвигать вправо:

Теперь мы установим положение фона для каждого нашего слоя:

Изначально перекрывающие слои будут иметь непрозрачность 0. Затем мы сделаем переход и изменение уровня непрозрачности при наведении курсора мыши:

Для того, чтобы скрыть заднюю часть мы зафиксируем положение и значение свойства z-index для изображений. Также добавим переходы для тех браузеров, которые не поддерживают 3D трансформации:

Когда браузер не поддерживает свойства 3D мы будем загружать дополнительную таблицу стилей - fallback.cssкоторая содержится следующий код:

Наши слои теперь будут смещаться при наведении на них мышкой — влево.

Давайте взглянем на пример!

 

Пример


Для данного примера мы сделаем эффект складывания изображения. Для решения задачи установим значение свойства perspective для элемента span view и переходы для остальных элементов.

Второй, третий, четвертый и пятый слои будут переводиться и вращаться в 3D, создавая эффект складывания:

 

Каждый из слоев будет смещаться влево. Так как мы хотим исключить пробелы между слоями, то установим ширину 59px. Второй слой будет поворачиваться на -45 градусов. Четвертый слайд вращается в другую сторону. А третий и пятый слои поворачиваются на 90 градусов. У нас построена вложенная структура, поэтому при повороте родителя, потомок также поворачивается.

Для придания более реалистичного вида добавим градиенты для слоев:

Для той части миниатюры, которая открывается при наведении курсора мыши, также установим градиент для фона, чтобы имитировать тень:

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

Перевод: Виктор Доценко

Подведем итоги


На этом все! Вы можете посмотреть так же на другие примеры в демонстрации. Так же существует множество различных эффектов с которыми Вы можете попробовать по экспериментировать  Надеюсь Вам было интересно. Подписывайтесь, комментируйте и творите! Всего доброго.

 


Новая система комментариев
comments powered by HyperComments