Анимированные фоны для сайта на CSS и JavaScript
82 любопытных
В веб-дизайне анимация часто используется как способ привлечения внимания. Движение заставляет пользователей сосредоточиться на определенном элементе — например, кнопке или изображении.
Но анимацию можно использовать и более тонко. Часто, они используются для создания настроения и улучшения эстетики.
Это не значит, что анимированный фон не может быть не приятным или даже назойливым. Все зависит от цели, стоящей за этим элементом. В любом случае, это демонстрирует гибкость, предоставленную дизайнерам.
Сегодня мы рассмотрим анимированные фоны, которые отличаются по внешнему виду и вариантам использования. Они являются яркими примерами того, как немного CSS и JavaScript могут придать изюминку ранее статичным функциям.
Анимированный фон боке
Стиль «боке» часто ассоциируется с фотографией. Здесь он используется с более размытым эффектом, поскольку точки то появляются, то исчезают из фокуса — подобно лавовой лампе. В этом фрагменте используется ванильный JavaScript и HTML canvas для создания шелковисто-гладкого фона.
See the Pen Animated Bokeh Lava Lamp Canvas by smpnjn (@smpnjn) on CodePen.
Матовый UI фон
Этот фон имеет аналогичный эффект, только немного более интересный. Он также идеально подходит для матового дизайна, поскольку вы можете видеть, как шарики мягко плавают под стеклянным блоком. Анимация также является генеративной — это означает, что она движется случайным образом на основе заданных критериев.
See the Pen Generative UI — Orb Animation [pixi.js] + Frosty Elements ❄️ by George Francis (@georgedoescode) on CodePen.
Простой волнообразный фон на CSS
Вот отличный способ использования анимированного фона. Эти мягкие волны, созданные с помощью CSS, позволяют отделить главную область от остального содержимого страницы. Этот анимированный фон может стать прекрасным вступительным разделом, который не будет перегружать пользователей.
See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen.
Анимированный градиентный фон на CSS
Градиент — отличный анимированный фон. Он заметен и не отвлекает внимание от более важных элементов страницы. Здесь мы используем радиальный градиент, который плавно меняет оттенки.
See the Pen CSS animated background by Andrew (@chickenroyal) on CodePen.
Анимация фона текста на CSS
Использование CSS background-clip может придать элементу дизайна крутой эффект. Этот фрагмент добавляет плавно прокручивающийся фон к тексту заголовка, который мгновенно создает праздничное настроение.
See the Pen CSS Seamless Animated Text by George Brook (@georgebrook) on CodePen.
Анимированный фон на чистом CSS
Скорость может играть решающую роль в удобстве использования анимированного фона. Эти медленно прокручивающиеся квадраты могут плавно перемещаться, но так же позволяют легко прочитать заголовок. Если вы собираетесь добавить текст поверх анимации, лучше использовать более медленную анимацию.
See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.
Анимированный фон с использованием SVG
Наконец, в этом фрагменте разумно использована комбинация эффектов, которые мы видели выше. Здесь есть смещающиеся градиентные оттенки, а также плавно меняющиеся формы. SVG и CSS гарантируют, что все работает как надо. Важно отметить, что на экране мобильных телефонов анимация работает так же прекрасно, как и на настольном компьютере.
See the Pen SVG animated background by Josie Barker (@weenabeana) on CodePen.
И наконец
Анимированные фоны — это простой способ привнести уникальный стиль на ваш сайт. Независимо от того, используете ли вы их для всей страницы или только для одного элемента, они могут помочь создать привлекательный визуальный и пользовательский опыт.
Однако перед их применением стоит тщательно продумать их воздействие. В идеале анимация должна дополнять, а не отвлекать от целей вашего сайта. Такие факторы, как доступность и удобство использования, имеют первостепенное значение. Учитывая это, подумайте, что лучше всего подходит для ваших нужд.
