Домашняя страница любого веб-сайта всегда содержит определенное количество постоянных элементов:
бренд, иконки, иллюстрации. В последнее время мы наблюдаем всплеск популярности использования в веб-дизайне компонентов, содержащих какое-либо движение, например, видео и анимация на фоне сайта.
Есть много способов «оживить» страницу, но мы наблюдаем появление нового тренда в анимации веб-дизайна: переход с эффектом дыма (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
Если мы пропустили еще интересные сайты, использующие тот же эффект, пожалуйста, поделитесь в комментариях ссылкой.
Как вы считаете, данный стиль может стать одним из основных трендов веб-дизайна в ближайшем будущем?