Как установить снежинки на сайт (jQuery)

Как установить снежинки на сайт (jQuery)

Категория: Технические советы
– Автор: Игорь (Администратор)

Как установить снежинки на сайт (jQuery)Снежинки на сайт это весьма старый, но забавный, прием, который применялся и будет применяться на сайтах для создания новогоднего настроения. В свое время первые варианты снежинок вызывали негодования, так как их использование могло заметно тормозить отображение и прокрутку страниц на сайтах. Однако, сегодня компьютеры достаточно мощные и поэтому такие приятности можно смело размещать себе на сайт.

Примечание: Тем не менее, на некоторых сайтах со сложной версткой или большим обилием скриптов, такие приятности могут тормозить. Но, такое не часто встречается.

Поэтому в рамках данной статьи я расскажу как установить снежинки на сайт, при условии, что у вас подключена библиотека jQuery.

 

Как установить снежинки на сайт (jQuery)

 

Но, прежде пара советов начинающим вебмастерам:

1. Обязательно следите за тем, чтобы снежинки не ухудшали просмотр. Здорово, когда падает много снежинок и создается ощущение снегопада, однако это не должно мешать пользователям читать статьи и заниматься всем остальным.

2. Подбирайте цвета снежинок так, чтобы они не отвлекали на себя основное внимание. Даже небольшое количество снежинок режущего цвета может неприятно сказываться на удобочитаемости страниц. Старайтесь делать их блеклыми относительно основных цветов сайта.

3. Старайтесь задавать скорость падения снежинок так, чтобы они плавно перемещались по экрану. Медленно падающие снежинки - это один из оптимальных вариантов. Создается впечатление первого выпавшего снега, мягкого и пушистого.

 

А теперь, перейдем к основной части как установить снежинки на сайт:

0. Убедитесь, что у вас подключена библиотека jQuery

1. Создайте в корне сайта или где вам удобнее файл с названием "snow.fall.jquery.js". В принципе, вы можете использовать любое название, но для инструкции было выбрано это.

2. Подкорректируйте и скопируйте весь нижеследующий код в этот файл, а затем сохраните. В самом начале идут настройки.

// Снежинок на странице
var snowCountMax = 80;
// Массив цветов снега
var arrColor = ["#b9dff5","#b9dff5","#b9dff5","#b9dff5","#b9dff5"];
// Символ снежинки
var snowView = "*";
// Скорость падения (чем больше число, тем медленней)
var speed = 0.6;  
// Максимальный размер
var sizeMax = 30;
// Минимальный размер
var sizeMin = 12;
var screenHeight;
var screenWidth;
var timer;
 
function initSnow() {
    // размер экрана
    screenHeight = jQuery(document).height();
    screenWidth = jQuery(document).width(); 
     
    var sizeRange = sizeMax - sizeMin;
    for(i = 0; i <= snowCountMax; i++){
        var sizeFont = Math.floor(sizeRange*Math.random())+sizeMin; // случайный размер снежинки
        var posx = Math.floor((screenWidth-sizeFont*2)*Math.random()); // снежинки по всей оси X
        var posy = Math.floor((screenHeight-sizeFont*2)*Math.random()); // снежинки по всей оси Y
        var randColor = arrColor[Math.floor(arrColor.length*Math.random())]; // случайный цвет
        var size = Math.floor(sizeRange*Math.random()) + sizeMin;        
        span = jQuery("#snow_"+i); // снежинка по порядку
        span.css('fontSize', sizeFont+"px"); // задаем ей размер
        span.css('color', randColor); // цвет
        span.attr('size', size); // в атрибут сохраняем скорость этой снежинки
        span.attr('speed', speed*sizeFont/5); // в атрибут сохраняем скорость этой снежинки
        span.attr('posx', posx); // в атрибут пишем положение по X
        span.attr('posy', posy); // в атрибут пишем положение по Y
        span.css('left', posx+"px"); // задаем положение по X
        span.css('top', posy+"px"); // задаем положение по Y        
    }
    moveSnow();
}
 
// падение снежинок
function moveSnow() {
    for(i = 0; i <= snowCountMax; i++){
        span = jQuery("#snow_"+i); // снежинка по порядку
        var posy = parseInt(span.attr('posy')) + parseInt(span.attr('speed'));
        var posx = parseInt(span.attr('posx'));
        var size = parseInt(span.attr('size'));
        var margin = posx + Math.floor(Math.random()*4)-2; // колыхание по X
        span.animate({
            top: posy+"px",
            left: margin + "px"
        }, 70);
        span.attr('posy', posy);
        span.attr('posx', margin);
        var sizeRange = sizeMax - sizeMin;
        var sizeFont = Math.floor(sizeRange*Math.random()) + sizeMin; // случайный размер снежинки
        if(posy >= (screenHeight-sizeFont*2)){ // если снежинка полностью опустилась
            posx = Math.floor((screenWidth-sizeFont*2)*Math.random()); // снежинки по всей оси X
            span.attr('posx', posx);
            span.attr('posy', 0);
            span.css('fontSize', sizeFont+"px"); // меняем размер
        }
    }
    var timer = setTimeout("moveSnow()", 70);
}
 
// создаем на  странице снежинки
for (i = 0; i <= snowCountMax; i++){
    jQuery('body').append("<span id='snow_"+i+"' style='position: absolute;'>"+snowView+"</span>");
}jQuery(function () {
    // запускам снегопад
    initSnow();
});

3. Теперь, осталось только подключить файл. Для этого в вашем шаблоне вставьте перед закрывающим тегом "</body>" следующий код

<script src="/snow.fall.jquery.js" type="text/javascript"></script>

Если вы сохранили файл в какой-то каталог или назвали файл по другому, то укажите корректный адрес в атрибуте "src"

4. Все, теперь при открытии страниц на вашем будут появляться снежинки.

Весьма простой и удобный метод установить снежинки на сайт. Однако, помните о советах по настройке. С наступающим!

Социальные сети

Группа в VK

☕ Понравился обзор? Поделитесь с друзьями!
Рекомендуемые
Добавить комментарий / отзыв
Комментарий - это вежливое и наполненное смыслом сообщение (правила).


* Нажимая на кнопку "Отправить", Вы соглашаетесь с политикой конфиденциальности.
Социальные сети

Группа в VK

 
Свежие обзоры
Программы (Freeware, OpenSource...)
Еще программы / обзоры
Полезное
О нас
Инфо