Снег на страницах сайта

Категория: Разное
Опубликовано: 24.12.2016 17:02

В связи с приближающимся Новым Годом думаю многие вебмастера захотят украсить свой сайт падающим на нем снегом. Мы это будем делать простеньким javascript который не будет сильно нагружать сайт, но в тоже время сделает очень красивый эффект.


Вариант "падающего снега" с сайта http://www.seomark.ru/jquery_snow.html
Все снежинки имеют один рисунок, но разный размер. Обычно для этого используют значок с кодом &#10052. Пример такого снега вы видите на этой странице. Разработчик плагина - программист из Словении Иван Лазаревич (Ivan Lazarevic), автор популярного слайдера Coin Slider (см. статью "Cлайд-шоу для сайта - Coin Slider").

Установку "падающего снега" начинаем с создания новой папки, естественно, с именем snow, затем скачиваем архив и распаковываем его в эту папку. У нас получится в ней два скрипта jquery-1.8.3.min.js и jquery.snow.js.

Далее необходимо добавить в заголовок страницы внутрь тега <head>...</head> следующие строчки, указывающие пути к этим скриптам, и небольшой JavaScript для инициализации "падающего снега":

<script type="text/javascript" src="/news/snow/jquery-1.8.3.min.js"></script>
<script type=
"text/javascript" src="/news/snow/jquery.snow.js"></script>
<script type=
$(document).ready( function(){

Для того, чтобы снег появился на странице сайта, достаточно добавить внутрь тега <body> (лучше в начале страницы) строчку
<div id="snow"> </div>.

Настроек у этого плагина всего четыре. Они находятся в самом начале файла jquery.snow.js и их можно изменять в любом редакторе или в Блокноте:
minSize : 10// минимальный размер снежинки
maxSize : 20// максимальный размер снежинки
newOn : 500// частота появления снежинок в мсек, то есть густота снега
flakeColor : "#bbbbbb" // цвет снежинок

Обратите также внимание на значение z-index:10 для снега, которое задано в первых строчках файла jquery.snow.js. Оно задает положение снежинок поверх слайдеров (слайд-шоу) и выпадающих меню, если они есть на вашей странице.

Let It Snow.

So, you want JavaScript snow on your web site, eh?

Snowstorm is a JavaScript-driven snow effect that can be easily added to web pages. It is free for use, and easy to set up. A single JavaScript file provides the functionality required. No images are used for the snow effect.

I'd like to use this on my site.

This is all you need to get started:

<script src="/news/snowstorm.js"></script>

See this basic example for reference.

What kind of things can I customize?

You can adjust the snow speed, the amount of snow, the "wind", if and where it should stick (and if it should "melt"), and finally, whether the snow can react to the mouse moving (ie., "wind changes.") See Customizing Snowstorm for more.

And the Christmas Lights?

The christmas lights are a separate experimental script which also has an example. It is undocumented, but the script can be modified to taste if you're the adventurous type.


ZIP file, includes this demo page and source code.

Also on Github: github.com/scottschiller/snowstorm/


Snowstorm is provided under a BSD license.

Technical Notes

Snowstorm works under modern browsers, and as far back as IE 6 - possibly even 5.5, if you can find a copy!

If you are seeing snow as you read this, then the script is working as expected.


Snowstorm can eat up a lot of CPU, even on modern computers, because of the number of elements being moved around the screen at once. The basic example may have notably lower CPU use as it doesn't include the christmas lights, and the page layout is much simpler. Consider raising the animation interval, and lowering the amount of snowflakes (active and max) to help reduce CPU use.

Where supported, Snowstorm will attempt to use GPU-based hardware acceleration to draw and animate the snow. Having GPU acceleration can help in reducing CPU load.

Mobile Support

By default, mobile devices are excluded from the snow effect to be nice to their CPUs (and batteries.) If your local marketing department insists, "This must work on mobile!" despite being warned of the downsides, you can set snowStorm.excludeMobile = false; (or edit the snowstorm.js file directly) to enable Snowstorm on devices like the iPhone, iPad and Android phones etc. This demo page has the effect enabled for mobile devices.


One JavaScript reference is required. Aside from customization, that's it!

<script src="/news/snowstorm.js"></script>

Once you have snowstorm configured, you can use the optimized, minified version of the code (~40% smaller):

<script src="/news/snowstorm-min.js"></script>

Customizing Snowstorm

Once you have Snowstorm running in your page, you can customize its properties either by editing the snowstorm.js file directly, or assigning new values to the snowStorm object after snowstorm.js has loaded.

For example:

<!-- required snowstorm JS, default behaviour -->
<script src="/news/snowstorm.js"></script>

<!-- now, we'll customize the snowStorm object -->
snowStorm.snowColor = '#99ccff';   // blue-ish snow!?
snowStorm.flakesMaxActive = 96;    // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view

See this customized example in action.

Configurable Properties

Snowstorm can be fairly easily customized; some of the major properties are listed below.

snowStorm.autoStart = true;
Whether the snow should start automatically or not.
snowStorm.animationInterval = 33;
Theoretical "milliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
snowStorm.flakeBottom = null;
Limits the "floor" (pixels) of the snow. If unspecified, snow will "stick" to the bottom of the browser window and persists through browser resize/scrolling.
snowStorm.flakesMax = 128;
Sets the maximum number of snowflakes that can exist on the screen at any given time.
snowStorm.flakesMaxActive = 64;
Sets the limit of "falling" snowflakes (ie. moving on the screen, thus considered to be active.)
snowStorm.followMouse = true;
Allows snow to move dynamically with the "wind", relative to the mouse's X (left/right) coordinates.
snowStorm.freezeOnBlur = true;
Stops the snow effect when the browser window goes out of focus, eg., user is in another tab. Saves CPU, nicer to user.
snowStorm.snowColor = '#fff';
Don't eat (or use?) yellow snow.
snowStorm.snowCharacter = '•';
&bull; (•) = bullet. &middot; entity (·) is not used as it's square on some systems etc. Changing this may result in cropping of the character and may require flakeWidth/flakeHeight changes, so be careful.
snowStorm.snowStick = true;
Allows the snow to "stick" to the bottom of the window. When off, snow will never sit at the bottom.
snowStorm.targetElement = null;
An HTML element which snow will be appended to (default: document body.) Can be an element ID string eg. 'myDiv', or a DOM node reference. See relative and absolute-positioned examples.
snowStorm.useMeltEffect = true;
When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
snowStorm.useTwinkleEffect = true;
Allow snow to randomly "flicker" in and out of view while falling
snowStorm.usePositionFixed = false;
true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported.
snowStorm.vMaxX = 8;
snowStorm.vMaxY = 5;
Defines maximum X and Y velocities for the storm; a random value in this range is selected for each snowflake.


Snowstorm has a few basic methods for controlling the snow effect.

Sets the wind speed with a random value relative to vMaxX and vMaxY properties.
Stops the snow effect in place.
Continues snowing from a "frozen" state.
Enables or disables the snow effect depending on state, same as calling freeze() or resume().
Freezes and kills the snowstorm effect, and removes related event handlers. Snowstorm will not work properly if other methods are called after stop().