Логотип Валидатор Валидатор Качество создания сайта

Снег на сайте

JavaScript-эффект падающего снега

С помощью языка программирования JavaScript можно создать очень интересный эффект падающего снега на сайте.

Чтоб сделать падающий снег на своём сайте, к этой странице я подключил довольно таки длинный скрипт падающего снега, реализованный с помощью JavaScript-кода.

Если нужно добавить эффект падающего снега на сайт HTML, то вполне достаточно всего лишь настроить этот скрипт.

Скрипт снега на сайте

Чтобы падающий снег на сайте выглядел интересно, нужно учесть несколько важных, ключевых моментов.  Смотреть эффект снега, падающего на рисунок: Эффект падающего снега на рисунок

Видимость снежинок - код снега выводит их на всё "тело" веб-страницы, т.е. действует на тэг <body>, выводя их за рамки страницы, если они установлены. А снизу снежинки исчезают там, где им установлено в скрипте снега.

Нижняя граница видимости снежинок - прописывается в операторе if функции snow(), в 42-ой строчке кода, в выражении: if (y_pos[i] > height - 89){ Нижняя граница видимости снежинок тем дальше, чем меньше цифра, вычитаемая из высоты. Если же, вместо указанного числа "89", поставить, скажем - "49", то снежинки будут, "покружившись" на рисунке примера, исчезать уже за его разделительной полосой.

Количество снежинок - устанавливается в 14-ой строчке js-кода скрипта, в выражении: var col = Math.round(height/25); Количество снежинок тем больше, чем меньше число, прописанное в этом выражении.

Скорость снежинок - настраивается в 50-ой строчке кода, в выражении: setTimeout("snow()", 40); Скорость снежинок тем больше, чем меньше число задержки.

** К примеру, указав этим числам достаточно маленькое значение, скажем - "5", можно устроить "настоящий снегопад" на странице своего сайта. "Буран"! Он самый!

И кроме этого!

Не забывать(!) в первой строчке кода: var imgsrc="image/snow/snow.gif"; указывать путь к нужной картинке снежинки.

Кстати!  Можно спокойно указывать ЛЮБУЮ КАРТИНКУ из этой папки. Ради пробы я брал и прописывал картинки: snow.gif ÷ snow6.gif (*интересно; они все разные), абсолютно БЕЗ каких-либо изменений в коде снега.

Важно! Чтобы снежинки равномерно распределялись по всей высоте страницы, ВАЖНО(!), где вставлять JavaScript-код. Лучше всего, чтобы у страницы не "дёргался" нижний скролл, вставить код скрипта снега в самый конец страницы.   ПРОВЕРЕНО!
**И ещё!   В тэг <head> код скрипта НЕ ВСТАВЛЯТЬ!  НЕ РАБОТАЕТ!

У себя скрипт снега на сайте я вырезал в отдельный файл "snow.js"


Эффект падающего снега на рисунок

К данной учебной странице я подключил эффект снега, падающего на рисунок ёлки, т.к. изучал его зимой, в самый канун Нового Года.
А вообще же - можно сделать, чтобы падало на любой рисунок, и всё, что душе угодно. Хоть лягушки! Что угодно!

Для этого достаточно всего лишь поменять картинки.

Ёлка и падающий снег


Снежинки перестают быть видимыми там, где им прописано в их скрипте снега на сайте, т.е. в данном случае здесь, на этой строчке, их уже не видно. Они падают, и аккуратно "ложатся в сугробы" на рисунке примера! Очень похоже!


Назад

ВВЕРХ

Все права защищены. Copyright © 2009 - Коротеев Владимир.

Яндекс.Метрика