Когда приходит следующий сезон года, вы хотите украсить вашу страницу :) Для этого можно добавлять возможные эффекты.
Давайте рассмотрим эффект - добавление снега.
Снег будет идти на странице и будет создавать ощущение, что идет снегопад - смотрится очень стильно.
Первое, что нам потребуется, это найти скрипт, который будет создавать данный эффект. При поиске в Яндексе мы решили воспользоваться первой ссылкой, которая ведет на сайт 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 #снег
1 view
134
26
6 months ago 00:32:16 1
СОЗДАНИЕ МУЗЫКИ В FL STUDIO. Самый понятный урок.
6 months ago 00:28:38 1
Как играть: Ария - Беспечный ангел на гитаре | Разбор+Табы+Соло | Видеоурок
6 months ago 00:12:57 1
Глагол to be в прошедшем времени. Английская грамматика. Видеоуроки Myefe.
6 months ago 00:07:16 1
Metallica - Nothing else matters. Как играть 2 часть (видео урок)
6 months ago 00:02:38 1
Обычный автобус Аккорды Армейская песня Разбор на гитаре Бой Текст
6 months ago 00:23:25 1
Как легко играть: THE LAST OF US на гитаре | Подробный разбор
6 months ago 00:29:12 1
Как играть: ДДТ - ЭТО ВСЁ на гитаре | обучающий урок
6 months ago 00:16:04 1
Урок 1/2 игры НА ГИТАРЕ ДЛЯ НАЧИНАЮЩИХ. Игра на гитаре с нуля Просто, Легко и Интересно!
6 months ago 00:18:12 1
Урок 1/1 игры НА ГИТАРЕ ДЛЯ НАЧИНАЮЩИХ. Игра на гитаре с нуля Просто, Легко и Интересно!
6 months ago 00:07:00 1
Уроки французского #64: Местоимения. Прямое и косвенное дополнение (2)
6 months ago 00:23:33 1
Урок#124: Conditionnel passé / Условное наклонение прошедшего времени. Французский язык
6 months ago 00:05:49 1
Разминка для детей перед тренировкой по гимнастике дома. Онлайн урок по художественной гимнастики
6 months ago 00:23:45 1
ДОЛГОЖДАННЫЕ НОВОСТИ!!! ПРО ВСЁ-ВСЁ-ВСЁ!!! С ПРИВЕТОМ ИЗ МАЙКОПА!!!
6 months ago 00:12:39 12
Методы изучения природы
6 months ago 00:06:10 1
МАГНИТНАЯ ИНДУКЦИЯ 11 класс физика сила Ампера сила Лоренца
6 months ago 00:28:17 1
Урок “Карандашный рисунок из фотографии в фотошопе“.
6 months ago 00:32:08 1
Шляпка спицами для кукол Паола Рейна и игрушек амигуруми
6 months ago 00:00:56 1
Как вы запихиваете в жизнь близких негатив #shorts
6 months ago 00:01:00 1
Будут скрипеть, но жить #shorts
6 months ago 00:13:44 1
Строение голосового аппарата. Гортань и голосовые связки🗣