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

 

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

Шаг 1. HTML

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

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

Шаг 2. СSS

Вся работа данной конструкции будет сосредоточена именно на CSS, по этому давайте поэтапно разберемся, как все это реализовано:

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

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

На самом деле реализация эффекта достаточно простая, но это не значит, что он не интересен, думаю такой эффект найдет своего мастера. А как такой эффект Вам друзья?

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