Уроки HTML, CSS / Как добавить снег на сайт

Когда приходит следующий сезон года, вы хотите украсить вашу страницу :) Для этого можно добавлять возможные эффекты. Давайте рассмотрим эффект - добавление снега. Снег будет идти на странице и будет создавать ощущение, что идет снегопад - смотрится очень стильно. Первое, что нам потребуется, это найти скрипт, который будет создавать данный эффект. При поиске в Яндексе мы решили воспользоваться первой ссылкой, которая ведет на сайт daruse_ru. Конечно мы помним, что снег у нас белого цвета и нам нужно оформить страницу в темных тонах, чтобы он хорошо выделялся. Мы должны поставить на задний фон какую-нибудь картинку. Подготавливаем обычный сайт и ставим на задний фон картинку и добавляем заголовок страницы - вот пример кода: [!DOCTYPE html] [html lang=“en“] [head] [meta charset=“UTF-8“] [title]Падающий снег[/title] [style] body { background: url(); background-size: cover; background-repeat: no-repeat; } [/style] [/head] [body] [h1 style=“color:white;“]Привет, это демонстрация снега.[/h1] [/body] [/html] Обратите внимание, что для того, чтобы разместить в фоне какую-нибудь картинку, мы определили стиль для body. И в нем указали свойство background с указанием на url картинки, т.е. ссылки на картинку. Когда мы приготовили классный задний фон, теперь мы можем подключать наш скрипт. Скрипт снега подключается внизу страницы – перед закрывающим тегом [/body] и обратите внимание, что дополнительно к самому скрипту снега подключается еще и скрипт jQuery. jQuery – это javascript библиотека написанная на языке JavaScript. Это некий набор готовых функций, написанные и проверенные другими людьми, которые упрощают жизнь разработчика и написание кода на JavaScript. Напоминаю, что при использовании этого скрипта мы столкнулись с некоторыми небольшими замечаниями, то есть вопервых, файла нет, и он делается из файла простым копированием. Файл скрипта снега мы положили в корень сайта, поэтому подключаем его вот этим вызовом [script src=’’][/script]. Конечно это подключение требует некоторой стартовой настройки, которая и задается в следующем блоке [script type=“text/javascript“] $(document).ready(function(){ $(document).snowfall({image :“img/“, minSize: 10, maxSize:20}); }); [/script] 😊 Вот и все – снег теперь пошел! 😊 Конечный и рабочий пример: [!DOCTYPE html] [html lang=“en“] [head] [meta charset=“UTF-8“] [title]Падающий снег[/title] [style] body { background: url(); background-size: cover; background-repeat: no-repeat; } [/style] [script type=“text/javascript“ src=““][/script] [/head] [body] [h1 style=“color:white;“]Привет, это демонстрация снега.[/h1] [script src=’’][/script] [script type=“text/javascript“] $(document).ready(function(){ $(document).snowfall({image :“img/“, minSize: 10, maxSize:20}); }); [/script] [/body] [/html] P.S. в ютуб угловые скобки заменены на квадратные – для запуска кода сделайте наоборот 😊 Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: Ссылка на скрипт снега: Пример работы скрипта и код: 1) Урок на сайте Wiseplat: ✔ Сообщество программистов: ✔ —----------- Вступай в группу Вк - 🚀 Группа FaceBook - Инстаграм Wiseplat: Instagram: Twitter - ******************************** Если Вам понравилась публикация, подписывайтесь на канал! Ставьте лайки, тогда будем еще писать такой контент :) Если есть вопросы или пожелания, то пишите, в комментариях. ******************************** - Уроки от #OlegShpagin 👨🏼‍💻 #урокиhtml #урокиcss #снег