1,0×
00:00/10:42
Уроки Html, Css / Как добавить снег на сайт
Когда приходит следующий сезон года, вы хотите украсить вашу страницу :) Для этого можно добавлять возможные эффекты.
Давайте рассмотрим эффект - добавление снега.
Снег будет идти на странице и будет создавать ощущение, что идет снегопад - смотрится очень стильно.
Первое, что нам потребуется, это найти скрипт, который будет создавать данный эффект. При поиске в Яндексе мы решили воспользоваться первой ссылкой, которая ведет на сайт daruse_ru.
Конечно мы помним, что снег у нас белого цвета и нам нужно оформить страницу в темных тонах, чтобы он хорошо выделялся. Мы должны поставить на задний фон какую-нибудь картинку.
Подготавливаем обычный сайт и ставим на задний фон картинку и добавляем заголовок страницы - вот пример кода:
[!DOCTYPE html]
[html lang=en]
[head]
[meta charset=UTF-8]
[title]Падающий снег[/title]
[style]
body {
background: url(s1200.jpg);
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.
Напоминаю, что при использовании этого скрипта мы столкнулись с некоторыми небольшими замечаниями, то есть вопервых, файла snow4.png нет, и он делается из файла snow1.png простым копированием. Файл скрипта снега snowfall.js мы положили в корень сайта, поэтому подключаем его вот этим вызовом [script src='snowfall.js'][/script]. Конечно это подключение требует некоторой стартовой настройки, которая и задается в следующем блоке
[script type=text/javascript]
$(document).ready(function(){
$(document).snowfall({image :img/snow4.png, minSize: 10, maxSize:20});
});
[/script]
😊 Вот и все – снег теперь пошел! 😊
Конечный и рабочий пример:
[!DOCTYPE html]
[html lang=en]
[head]
[meta charset=UTF-8]
[title]Падающий снег[/title]
[style]
body {
background: url(s1200.jpg);
background-size: cover;
background-repeat: no-repeat;
}
[/style]
[script type=text/javascript src=https://code.jquery.com/jquery-3.4.1.min.js][/script]
[/head]
[body]
[h1 style=color:white;]Привет, это демонстрация снега.[/h1]
[script src='snowfall.js'][/script]
[script type=text/javascript]
$(document).ready(function(){
$(document).snowfall({image :img/snow4.png, minSize: 10, maxSize:20});
});
[/script]
[/body]
[/html]
P.S. в ютуб угловые скобки заменены на квадратные – для запуска кода сделайте наоборот 😊
Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: wiseplat.org/
Ссылка на скрипт снега: daruse.ru/...na-sajt-js
Пример работы скрипта и код: github.com/...y-Snowfall
1) Урок на сайте Wiseplat:
✔ Сообщество программистов: wiseplat.org/
✔ -------------
Вступай в группу Вк - vk.com/wiseplat 🚀
Группа FaceBook - www.facebook.com/wiseplat/
Инстаграм Wiseplat: www.instagram.com/wiseplat/
Instagram: www.instagram.com/shpaginoleg/
Twitter - twitter.com/...platSchool
********************************
Если Вам понравилась публикация, подписывайтесь на канал!
Ставьте лайки, тогда будем еще писать такой контент :)
Если есть вопросы или пожелания, то пишите, в комментариях.
********************************
- Уроки от #OlegShpagin 👨🏼💻
#урокиhtml #урокиcss #снег
Давайте рассмотрим эффект - добавление снега.
Снег будет идти на странице и будет создавать ощущение, что идет снегопад - смотрится очень стильно.
Первое, что нам потребуется, это найти скрипт, который будет создавать данный эффект. При поиске в Яндексе мы решили воспользоваться первой ссылкой, которая ведет на сайт daruse_ru.
Конечно мы помним, что снег у нас белого цвета и нам нужно оформить страницу в темных тонах, чтобы он хорошо выделялся. Мы должны поставить на задний фон какую-нибудь картинку.
Подготавливаем обычный сайт и ставим на задний фон картинку и добавляем заголовок страницы - вот пример кода:
[!DOCTYPE html]
[html lang=en]
[head]
[meta charset=UTF-8]
[title]Падающий снег[/title]
[style]
body {
background: url(s1200.jpg);
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.
Напоминаю, что при использовании этого скрипта мы столкнулись с некоторыми небольшими замечаниями, то есть вопервых, файла snow4.png нет, и он делается из файла snow1.png простым копированием. Файл скрипта снега snowfall.js мы положили в корень сайта, поэтому подключаем его вот этим вызовом [script src='snowfall.js'][/script]. Конечно это подключение требует некоторой стартовой настройки, которая и задается в следующем блоке
[script type=text/javascript]
$(document).ready(function(){
$(document).snowfall({image :img/snow4.png, minSize: 10, maxSize:20});
});
[/script]
😊 Вот и все – снег теперь пошел! 😊
Конечный и рабочий пример:
[!DOCTYPE html]
[html lang=en]
[head]
[meta charset=UTF-8]
[title]Падающий снег[/title]
[style]
body {
background: url(s1200.jpg);
background-size: cover;
background-repeat: no-repeat;
}
[/style]
[script type=text/javascript src=https://code.jquery.com/jquery-3.4.1.min.js][/script]
[/head]
[body]
[h1 style=color:white;]Привет, это демонстрация снега.[/h1]
[script src='snowfall.js'][/script]
[script type=text/javascript]
$(document).ready(function(){
$(document).snowfall({image :img/snow4.png, minSize: 10, maxSize:20});
});
[/script]
[/body]
[/html]
P.S. в ютуб угловые скобки заменены на квадратные – для запуска кода сделайте наоборот 😊
Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: wiseplat.org/
Ссылка на скрипт снега: daruse.ru/...na-sajt-js
Пример работы скрипта и код: github.com/...y-Snowfall
1) Урок на сайте Wiseplat:
✔ Сообщество программистов: wiseplat.org/
✔ -------------
Вступай в группу Вк - vk.com/wiseplat 🚀
Группа FaceBook - www.facebook.com/wiseplat/
Инстаграм Wiseplat: www.instagram.com/wiseplat/
Instagram: www.instagram.com/shpaginoleg/
Twitter - twitter.com/...platSchool
********************************
Если Вам понравилась публикация, подписывайтесь на канал!
Ставьте лайки, тогда будем еще писать такой контент :)
Если есть вопросы или пожелания, то пишите, в комментариях.
********************************
- Уроки от #OlegShpagin 👨🏼💻
#урокиhtml #урокиcss #снег
…
Хотите видеть больше публикаций по теме «Технологии»?