Эффект анимации тумана на сайте в CSS
Иногда веб мастеру нужно оригинально оформить интернет сайт или вновь созданную страницу, чтоб украсить его своеобразным элементом. Где даже такой эффект можно применить на слайдере, что безусловно смотреться будет уникально от других, но главное не искажая картинку. Некоторые делают в таком направление падение снега, в нашем случай будет идти туман.
Так смотрится на изображение, где ниже предоставлена ссылка на demo страницу.
Приступаем к установке:
ZORNET.RU
h1 <
font-family: ‘Lato’;
font-size: 156px;
font-weight: 100;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>
.sanecludeb <
position: relative;
height: 100vh;
width: 100%;
background-image: url(http://zornet.ru/ABVUN/Anisa/67546758.jpg);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
>
.bamportanenag-img-bagin <
background: url(http://zornet.ru/ABVUN/Anisa/fog-1.png) repeat-x;
background-size: contain;
background-position: center;
animation: marquee 60s linear infinite;
>
.bamportanenag-img-gedan <
background: url(http://zornet.ru/ABVUN/Anisa/fog-2.png) repeat-x;
background-size: contain;
background-position: center;
animation: marquee 40s linear infinite;
>
Сама идея не новая, но к тематическим сайтам подойдет, ведь светлая облако тумана пролетая над изображением создает анимационный фон дыма, что изначально продвигается с правой стороны на левую, и после этого создается необычным трюк с запоминающем наполнением материала.
Эффект падающего снега
Эта анимация стала одной из первых, которую я создал с помощью ActionScript в Flash много лет назад. Ниже представлен вариант аналогичного эффекта на HTML, CSS и JavaScript.
В этом руководстве вы узнает, как быстро добавить подобный эффект на свой сайт. А также, как приведенная ниже разметка и код заставляют этот эффект работать.
Обновлено: 2023-06-06 20:19:00 Ангелина Писанюк автор материала
Добавляем эффект падающего снега
В нижней части страницы (выше закрывающего тега ) добавьте следующий код:
#snowflakeContainer < position: absolute; left: 0px; top: 0px; display: none; >.snowflake // Массив для хранения объектов Snowflake var snowflakes = []; // Глобальные переменные для размера окна браузера var browserWidth; var browserHeight; // Указываем количество снежинок, которые должны быть видимыми var numberOfSnowflakes = 50; // Флаг для сброса положения снежинок var resetPosition = false; // Устанавливаем параметр enableAnimations var enableAnimations = false; var reduceMotionQuery = matchMedia("(prefers-reduced-motion)"); // Изменяем значение enableAnimations function setAccessibilityState() < if (reduceMotionQuery.matches) < enableAnimations = false; >else < enableAnimations = true; >> setAccessibilityState(); reduceMotionQuery.addListener(setAccessibilityState); // // Все начинается здесь. // function setup() < if (enableAnimations) < window.addEventListener("DOMContentLoaded", generateSnowflakes, false); window.addEventListener("resize", setResetFlag, false); >> setup(); // // Конструктор объекта Snowflake // function Snowflake(element, speed, xPos, yPos) < // устанавливаем начальные свойства снежинки this.element = element; this.speed = speed; this.xPos = xPos; this.yPos = yPos; this.scale = 1; // объявляем переменные, используемые для движения снежинки this.counter = 0; this.sign = Math.random() < 0.5 ? 1 : -1; // устанавливаем значения начальной непрозрачности и размера снежинки this.element.style.opacity = (.1 + Math.random()) / 3; >// // Функция, ответственная за перемещение снежинки // Snowflake.prototype.update = function () < // используем тригонометрию, чтобы определить позицию x и y this.counter += this.speed / 5000; this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40; this.yPos += Math.sin(this.counter) / 40 + this.speed / 30; this.scale = .5 + Math.abs(10 * Math.cos(this.counter) / 20); // устанавливаем позицию снежинки setTransform(Math.round(this.xPos), Math.round(this.yPos), this.scale, this.element); // если снежинка опустится ниже окна браузера, переместим ее обратно наверх if (this.yPos >browserHeight) < this.yPos = -50; >> // // Эффективный способ установить положение и размер снежинки // function setTransform(xPos, yPos, scale, el) < el.style.transform = `translate3d($px, $px, 0) scale($, $)`; > // // Функция, ответственная за создание снежинки // function generateSnowflakes() < // получаем элемент снежинки из DOM и сохраняем его var originalSnowflake = document.querySelector(".snowflake"); // получаем доступ к контейнеру родителя элемента снежинки var snowflakeContainer = originalSnowflake.parentNode; snowflakeContainer.style.display = "block"; // получаем размер окна браузера browserWidth = document.documentElement.clientWidth; browserHeight = document.documentElement.clientHeight; // создаем снежинку for (var i = 0; i < numberOfSnowflakes; i++) < // клонируем индивидуальную снежинку и добавляем ее в snowflakeContainer var snowflakeClone = originalSnowflake.cloneNode(true); snowflakeContainer.appendChild(snowflakeClone); // устанавливаем начальную позицию и свойства для оригинальной снежинки var initialXPos = getPosition(50, browserWidth); var initialYPos = getPosition(50, browserHeight); var speed = 5 + Math.random() * 40; // создаем объект Snowflake var snowflakeObject = new Snowflake(snowflakeClone, speed, initialXPos, initialYPos); snowflakes.push(snowflakeObject); >// убираем снежинку, так как больше не нужно, чтобы она была видимой snowflakeContainer.removeChild(originalSnowflake); moveSnowflakes(); > // // Отвечает за перемещение каждой снежинки, вызывая функцию обновления // function moveSnowflakes() < if (enableAnimations) < for (var i = 0; i < snowflakes.length; i++) < var snowflake = snowflakes[i]; snowflake.update(); >> // Сбрасывает значения позиций всех снежинок до установки нового значения if (resetPosition) < browserWidth = document.documentElement.clientWidth; browserHeight = document.documentElement.clientHeight; for (var i = 0; i < snowflakes.length; i++) < var snowflake = snowflakes[i]; snowflake.xPos = getPosition(50, browserWidth); snowflake.yPos = getPosition(50, browserHeight); >resetPosition = false; > requestAnimationFrame(moveSnowflakes); > // function getPosition(offset, size) < return Math.round(-1 * offset + Math.random() * (size + 2 * offset)); >// // Сброс позиций всех снежинок // function setResetFlag(e)
После добавления кода проверьте его работоспособность, открыв веб-страницу в браузере. Пример страницы с анимацией.
Цвет нашей снежинки определяется внутри класса .snowflake в CSS:
.snowflake
Измените значение свойства background-color на любой желаемый цвет. В примере установлен #FFFFFF (белый. Если собираетесь использовать этот эффект на более светлом фоне, нужно изменить цвет снежинки на более подходящий.
Чтобы настроить количество снежинок, найдите переменную numberOfSnowflakes в JavaScript-коде:
var numberOfSnowflakes = 50;
Сейчас установлено значение 50. Измените его на большее или меньшее число в зависимости от того, какой эффект вам необходим.
Как работает анимация: обзор кода
Этот эффект работает довольно просто. Позиция и размеры каждой из снежинок (наших элементов) меняются много раз в секунду. Именно эти изменения лежат в основе анимации.
Основа процесса находится в HTML, в котором определен элемент снежинки:
С помощью кода эта единственная снежинка клонируется множеств раз. Количество определяется значением переменной numberOfSnowflakes:
В процессе клонирования снежинок мы вносим незначительные изменения в их внешний вид, чтобы они немного отличались друг от друга:
Создаем падающий снег на HTML и CSS
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
В последнее время в Техасе холодно и снежно. Это вдохновило меня на создание анимации с падающим снегом. Делается это быстро, все вместе занимает от силы 10 минут.
Примечание. Я буду использовать Pug и Sass/SCSS для упрощения повторяющихся частей HTML и CSS соответственно. Но это не обязательно. Вы можете экстраполировать код и сделать все на чистых HTML и CSS.
Вот как наша анимация будет выглядеть:
Создаем фон
Давайте начнем с фона. Этот шаг опционален, его можно сделать по-разному. Для целей этой статьи мы ограничимся просто темным фоном со следующим CSS:
html, body
Добавляем снежинки
Затем мы создаем блок для каждой снежинки, которая будет у нас на экране. Мы можем сделать что-то типа такого:
Но для простоты лучше применим PugJS. Он позволяет использовать циклы для повторяющихся задач:
- for (i = 0; i < 50; i++) div(class="snowflake")
Стилизация снежинок
Теперь у нас есть блоки для всех снежинок на странице. Осталось их стилизовать. Снежинки будут маленькими, круглыми и белыми:
.snowflake
Мы использовали пользовательское свойство (--size) для ширины и высоты. Благодаря этому позже сможем без проблем получить снежинки разных размеров.
Также мы позиционировали снежинки вне области видимости (сверху). Падать они будут в зону, также находящуюся вне области видимости (снизу).
Анимация
Чтобы анимировать снегопад, мы используем CSS-анимацию с @keyframes . Начнем с чего-то простого, а затем немного усложним.
Для начала мы применим translate3d , чтобы заставить снежинки двигаться вертикально. Поскольку это 3D-преобразование, оно будет триггерить ускорение железа и выглядеть красивее, чем если бы мы анимировали другое свойство, например top :
@keyframes snowfall < 0% < transform: translate3d(0, 0, 0); >100% < transform: translate3d(0, 110vh, 0); >>
Мы могли бы применить эту анимацию для класса snowflake , добавив следующее свойство:
animation: snowfall 5s linear infinite;
Но тогда снежинки двигались бы только вертикально сверху вниз. Это выглядело бы не слишком натурально. Плюс, все снежинки перекрывают друг друга из-за абсолютного позиционирования, что не очень хорошо смотрится. Нам надо это исправить.
Мы могли бы создать 50 разных правил, по одному для каждой снежинки, назначив для каждой разные позиции left, углы и скорости. Но, хотя сделать это на чистом CSS вполне реально, это все же куча работы:
.snowflake:nth-child(1) < --size: 0.6vw; left: 55vw; animation: snowfall 8s linear infinite; >. .snowflake:nth-child(49) < --size: 1vw; left: 78vw; animation: snowfall 7s linear infinite; >.snowflake:nth-child(50)
Проще написать код с помощью SCSS и его функций, а затем использовать сгенерированный CSS-код. Поэтому, вместо того чтобы писать сотни строк кода, мы можем использовать циклы и существенно упростить разработку:
@for $i from 1 through 50 < .snowflake:nth-child(#) < --size: #vw; /* randomize size! */ left: #vw; animation: snowfall #s linear infinite; > >
Бац! Всего 7 строк кода, которые позже скомпилируются в 250! И нам не нужно придумывать рандомные числа, поскольку в SCSS для этого есть специальная функция random().
Последние штрихи
Все наши снежинки разных размеров и перемещаются с разной скоростью, но они все еще двигаются просто по вертикали, а это неприродно. Для добавления рандомных движений в стороны мы можем скомбинировать CSS-переменные и SCSS-функции:
/* uses CSS variables to determine initial and final position */ @keyframes snowfall < 0% < transform: translate3d(var(--left-ini), 0, 0); >100% < transform: translate3d(var(--left-end), 110vh, 0); >> @for $i from 1 through 50 < .snowflake:nth-child(#) < --size: #vw; --left-ini: #vw; /* random initial translation */ --left-end: #vw; /* random final translation */ left: #vw; animation: snowfall #s linear infinite; animation-delay: -#s; > >
Наконец, мы добавляем отрицательную задержку animation-delay , чтобы не все снежинки стартовали одновременно. В противном случае все они начали бы свое падение в один момент, что выглядело бы странно.
Апдейт: переместим переменные в HTML
Код, приведенный выше, нормальный. Но он генерирует слишком много повторяющихся с небольшими отличиями CSS-правил. Мы их можем упростить, сведя к одному свойству (или к двум) прямо в классе .snowflake , и использовать CSS-переменные для каждого элемента.
Идея в том, чтобы перенести объявление CSS-переменных из CSS в HTML:
. . . - function random(num) < return Math.floor(Math.random() * num) >- for (i = 0; i < 50; i++) div(class="snowflake", style=`--left: $vw; --left-ini: $vw; --left-end: $vw; --speed: $s; --size: $vw; --delay: -$s;`)
Теперь, когда все эти значения есть в HTML, мы можем удалить все CSS-селекторы и поместить свойства анимации прямо в определении .snowflake :
.snowflake
Это решение делает CSS-код существенно меньше и проще (из 500 строк остаются 34!), хотя и привносит немного сложности в HTML.
Итоги
Падающий снег — простая, но привлекающая внимание анимация. Вместе с тем она может быть довольно ресурсоемкой, если снежинок будет очень много. Будьте осторожны.
Видео создания анимации можно посмотреть на YouTube:
Эффект падающего снега
За анимацию отвечает свойство @keyframes , которая появилось в CSS 3.
html,bodyheight: 100%> body < background: url(home.jpg) no-repeat; background-size: cover; > @keyframes snow < 0% background-position: 0px 0px, 0px 0px, 0px 0px;> 100% background-position: 500px 1000px, 400px 400px, 300px 300px;> > #snow-container < background-image: url(snowflake.png), url(snowflake3.png), url(snowflake2.png); height: 100%; animation: snow 20s linear infinite; >
Обновлено: 01 ноября 2020
Комментарии
Авторизуйтесь, чтобы добавлять комментарии