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

Есть много способов «оживить» страницу, но мы наблюдаем появление нового тренда в анимации веб-дизайна: переход с эффектом дыма (Smoke Transitions).

Sevenhills Wholefoods

Это виртуальный рынок фермеров, который помогает сделать жизнь своих клиентов более здоровой. То как на сайте представлена работа данного сервиса, заслуживает отдельного внимания… Эффект дыма появляется, если нажать кнопку «Explore the journey». Данный сайт выиграл множество наград в сфере веб-дизайна.

Robin Mastromarino

Робин Масторамино (Robin Mastromarino) – французский UX/UI-дизайнер с красивы презентационным сайтом, иллюстрирующим его работы.

Trainrobber

Это команда «опасных виртуальных сказочников», использующих эффект дыма и параллакс для навигации.

Cavalier

Cavalier – эксперимент замаскированный под игру. Создан yourmajesty.co для тестирования последних веб-разработок. Для создания сайта использовались следующие инструменты: HTML5, CSS3, WebGL, Pixi, JavaScript, Three.js, SVG анимация, bodymovin.js, howler.js, 3D-звук, WebAudio, GSAP.

National Geographic

Сайт объединил отличные методы разработки и «дымовые переходы», чтобы создать интересную историю о медведях в парке Yellowstone.

В заключение, приведем несколько ресурсов, которые были задействованы для создания эффекта «дымного перехода»:

Smoke Effects in CSS and JavaScript

Pixi.js

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

Как вы считаете, данный стиль может стать одним из основных трендов веб-дизайна в ближайшем будущем?