Стилизация фотографий на сайте это весьма кропотливый и полезный прием, ведь именно визуализация информации помогает быстрее донести до посетителя желаемую информацию. Сегодня мы хотим рассказать об таком приеме визуализации и показать как можно создать удивительный эффект 2.5D для фотографий сайта при помощи CSS3 и слоев изображений. В неком роде у нас будет автоматический эффект параллакса, на который пользователь не будет влиять, изображение будет анимироваться при фокусировке на нем внимания, выглядит удивительно.

 

Если вы хотите использовать бесплатные шаблоны с адаптивностью и переводом на русский язык или другие языки, тогда обратите внимание на предложения от наших партнеров, там есть много интересных предложений, в том числе и платных с помощью в установке и настройке.

Шаг 1. HTML

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

Это вся разметка которая будет у нас, для получения такого эффекта вам стоит подготовить свое изображение заранее, разрезав его на слоя.

Шаг 2. CSS

Теперь переходим к самому интересному, нам необходимо анимировать наш каждый слой, задав ему свою скорость и позицию, после того как мы установили фон и задали общие параметры мы создаем правила для переднего плана:

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

У нас будет один главный объект на котором мы сфокусируем внимание, это пара в центре, мы их вырезали из изображения и установили для них следующие значения:

Также добавляем мелкие частицы, которые создают эффект бликов и пыли:

Такой прием станет отличным решением для ваших фотографий, эффект был разработан Matt Drew, фотография предоставлена ресурсом blogspot.

Вот и все. Готово!