Space Base Space Base
+7 928 008-80-89
ru
  • en
  • es
  • Главная
  • Услуги
  • Портфолио
  • Библиотека
  • Контакты
  • Главная
  • Услуги
  • Портфолио
  • Библиотека
  • Контакты
  1. Библиотека
  2. HTML, CSS, jQuery
  3. Падающие снежинки на сайте
logo

Падающие снежинки на сайте

16.12.2015

К новому году хочется прямо таки украсить сайт какой-нибудь новогодней атрибутикой. И, конечно же, елки в углу, даже если она мерцает гирляндами, мало. Обязательно надо, чтобы было видно всем в любом месте странице – на сайте тоже праздник! Новый год!

Как нельзя лучше для этой ситуации подойдут падающие снежинки. Чтобы разместить их на своем сайте требуется небольшой программный код на JavaScript. Приведенный ниже код позволяет получить желаемое быстро и просто. Просто подключите приведенный код скрипта к странице (готовый файл можно скачать здесь).

При желании, можно настроить его работу по своему усмотрению. В разделе «Настройки» можно исправить:

snowCount общее количество снежинок на экране
snowColor массив, содержащий список цветов
snowType массив стилей снежинок задается шрифтом;
snowLetter символ снежинки
snowSpeed коэффициент скорости падения
snowSizeMax максимальный размер снежинок
snowSizeMin минимальный размер снежинок
snowLocate расположение области падающего снега (1 - по всему экрану, 2 - слева, 3 - по центру, 4 - справа)

 

// Настройки
var snowCount = 12;
var snowColor = new Array("#b9dff4", "#b9dff5", "#b9dff6", "#b9dff7", "#b9dff8");
var snowType = new Array("Times");
var snowletter = "*"
var sinkSpeed = 0.5;
var snowSizeMin = 10;
var snowSizeMax = 40;
var snowLocation = 1; // 1 - по всему экрану, 2 - слева, 3 - по центру, 4 - справа

// Элементы для работы скрипта (здесь не стоит ничего менять)
var snow = new Array();
var marginbottom;
var marginright;
var timer;
var i_snow = 0;
var x_mv = new Array();
var crds = new Array();
var lftrght = new Array();
var browserinfos = navigator.userAgent;
var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/);
var ns6 = document.getElementById && !document.all;
var opera = browserinfos.match(/Opera/);
var browserok = ie5 || ns6 || opera;

function RandomMaker(range){
return Math.floor(range * Math.random());
}

function InitSnow(){
if (ie5 || opera){
marginbottom = document.body.scrollHeight;
marginright = document.body.clientWidth - 15;
}else if (ns6){
marginbottom = document.body.scrollHeight;
marginright = window.innerWidth - 15;
}
var snowsizerange = snowSizeMax - snowSizeMin;
for (i = 0; i <= snowCount; i++){
crds[i] = 0;
lftrght[i] = Math.random() * 15;
x_mv[i] = 0.03 + Math.random() / 10;
snow[i] = document.getElementById("s" + i);
snow[i].style.fontFamily = snowType[RandomMaker(snowType.length)];
snow[i].size = RandomMaker(snowsizerange) + snowSizeMin;
snow[i].style.fontSize = snow[i].size + "px";
snow[i].style.color = snowColor[RandomMaker(snowColor.length)];
snow[i].style.zIndex = 1000;
snow[i].sink=sinkSpeed * snow[i].size / 5;
if (snowLocation == 1){
snow[i].posx = RandomMaker(marginright - snow[i].size);
}
if (snowLocation == 2){
snow[i].posx = RandomMaker(marginright / 2 - snow[i].size);
}
if (snowLocation == 3){
snow[i].posx = RandomMaker(marginright / 2 - snow[i].size) + marginright / 4
}
if (snowLocation == 4){
snow[i].posx = RandomMaker(marginright / 2 - snow[i].size) + marginright / 2
}
snow[i].posy = RandomMaker(2 * marginbottom - marginbottom - 2 * snow[i].size);
snow[i].style.left = snow[i].posx + "px";
snow[i].style.top = snow[i].posy + "px";
}
MoveSnow();
}

function MoveSnow(){
for (i = 0; i <= snowCount; i++){
crds[i] += x_mv[i];
snow[i].posy += snow[i].sink;
snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + "px";
snow[i].style.top = snow[i].posy + "px";
if (snow[i].posy >= marginbottom - 2 * snow[i].size ||
parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i])){
if (snowLocation == 1){
snow[i].posx = RandomMaker(marginright - snow[i].size)
}
if (snowLocation == 2){
snow[i].posx = RandomMaker(marginright / 2 - snow[i].size)
}
if (snowLocation == 3){
snow[i].posx = RandomMaker(marginright / 2 - snow[i].size) + marginright / 4
}
if (snowLocation == 4){
snow[i].posx = RandomMaker(marginright / 2 - snow[i].size) + marginright / 2
}
snow[i].posy = 0;
}
}
var timer = setTimeout("MoveSnow()", 50);
}

for (i = 0; i <= snowCount; i++){
document.write("<span id='s" + i + "' style='position:absolute;top:-" + snowSizeMax +
"'>" + snowletter + "</span>");
}

if (browserok){
window.onload = InitSnow;
}

Для подключения скрипта просто добавьте в код страницы:


<script src="/путь к файлу/snow.js"></script>

Однако, не стоит забывать что, пользователь приходит на сайт не только для того чтобы посмотреть на снежинки, а скорей всего чтобы получить какую-то полезную для себя информацию. Поэтому, не стоит закрывать весь обзор стеной снега так, что не будет видно содержимого страницы. 10 – 15 спокойно падающих снежинок будет вполне достаточно создания новогоднего настроения.

С новым годом, друзья!

Другие материалы:

Переключение radio кнопки и checkbox нажатием на подпись в HTML


Установить, снять галочку, узнать состояние CheckBox в jQuery


Отправка (submit) формы после выбора файла с оформлением input[file]


Написать комментарий

Комментарии

В комментариях запрещено публиковать рекламные материалы. Все сообщения оправляются на модерацию и будут опубликованы, если не нарушают правил сайта после проверки.


коммент.

avatar

Константин

- 01 декабря 2023, 13:54 ↓
Крутяк, спасибо!

Разработка сайтов

Корпоративный сайт
Интернет-магазин
Лендинг - одностраничный сайт
Сайт-визитка
Сайт-портфолио

Проектирование

Прототип, UX-дизайн

Дизайн

UI-дизайн
Логотип

+54 911 2801-4950

info@space-base.net
+7 928 008-80-89

Web-сайты для успешного бизнеса

Web-сайты для успешного бизнеса

Главная Услуги Портфолио События Библиотека Контакты
+7 928 008-80-89 Меню
Политика в отношении обработки персональных данных © Copyright 2014 - | Space-Base

Лучшее время начать свой проект - Сейчас!

Выбраны опции:

Отправить сообщение на:

Telegram WhatsApp

Отправляя сообщение, вы даете свое согласие на
обработку песональных данных