Создаем эффект живого фото для сайта на CSS | RUDEBOX«Живые» фото стали достаточно популярны в последнее время, зачастую прибегают к использованию Gif-анимации, но хорошая картина получится достаточно тяжелой, по этому можно пойти другим путем, и реализовать интересную «живую» фотографию используя при этом исключительно трансформации CSS3. У нас будет шесть изображений, каждое из которого будет отвечать за определенную фигуру, мы разрезали специально так изображение, чтобы его можно было оживить, здесь будет реализован небольшой эффект параллакса.

Такой подход можно использовать для портфолио, или для некоторых изображений на сайте, которые нужно выделить, мы получаем не особо весомую картинку, но при этом подчеркнуто для внимания посетителей. И так, приступим.

Шаг 1. HTML

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

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

Создаем эффект живого фото для сайта на CSS | RUDEBOX

Шаг 2. CSS

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

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.