Decorating your websites and blogs during the New Year and Christmas holidays is a good thing. It's nice to even visit such sites :).

My blog is no exception, it also changed for the period of these winter holidays. You've probably noticed the new logo, which I can't brag about after writing a post about it, it's in this moment decorated with a herringbone and powdered with snow.

Previously, I have never installed scripts of falling snowflakes on the site, because I saw this miracle on other sites and to be honest - I didn't really like it, and sometimes even annoyed.

More recently on google appeared new feature... I reported about it in - it's falling snow and a freezing screen, which you can then erase with your finger. Try it, enter the query “ let it snow ”.

I really liked this approach for two reasons:

1 ... Looks very pretty;

2 ... The snow only starts to fall at the request of the user.

Here is such a decoration for me. But I will not be able to implement screen freezing - not a programmer, I want to order a programmer, but I'm not sure what will be in time for this New Year. But with falling snow in the Google style and "on request" of the visitor - it is possible :). The truth, again, not on their own, but with the help of one good "foreigner" :), but not the point.

Before I introduce you to snow on my blog, let's first briefly recall a few wordpress plugins that generate good snow for the site.

Falling snow plugins for WordPress

Very much good plugin... There are quite a few different kinds of settings: animation speed, color of falling snow, size of flakes, number of simultaneously falling snowflakes, etc. There is even something like freezing, but I could not start it :(.

At first glance, the snow on the site does not look bad, try it, you might like it.

But this plugin didn't work for me. Firstly, I don't really like plugins and use them only when urgently needed, and secondly, the snow starts to "fall" immediately after the page is loaded (remember the second point?) And sometimes distracts from the main content of the site (flies flicker in front of my eyes, damn it :)), and the snowflakes are all the same size.

They say a good plugin. For some reason, it did not start for me, although it was installed normally, but there is no snow :). Try it, you might be better.

This plugin makes exactly the same snow as I have now. There are no special settings, it's just that they installed it and it started to snow. Although, if you want, you can still configure something (colors, speed, etc.) in the plugin editor, i.e. by editing the plugin file itself.

Everything would be good, but the disadvantages are the same as before: this is still a plugin, although not "heavy", and it snows all the time, even if the user doesn't really need it.

This plugin can be called a versatile holiday plugin. In addition to the actual snow, this script can let inflatable balls and all sorts of leaves :).

A very interesting plugin ... I even wanted to install it. But ... I already have my own snow :).

Snow on the site at the request of the user

Here is the solution, which, in my opinion, is the best of all of the above. Of course, not everything is as cool here as in the same “Snow, balloons and more”, but simpler does not mean worse.

The main advantage of this script is “snow on demand”. The snow will not go by itself, it will have to be triggered by pressing a button. Thus, the visitor will not be stressed about the endlessly interfering white flakes on the screen. If he wants snow, he will see it.

First, download these files and upload to your server in desired folder:,. The button, by the way, looks like this:

Then between tags write the path to the scripts:

< script type= "text/javascript" src= "path / jquery.min.js? ver = 1.7"> < script src= "path / jquery.letsinsnow.js">

Note that if you already have the jquery library included, then you do not need to re-include it at all. Then just add the path to jquery.letsinsnow.js.

In jquery.letsinsnow.js on line 15 (‘color’: ‘# 79B3EC’,) you can change the color of the snowflakes. I think the rest can be left by default;).

It remains only to add a button to the site, by clicking on which it will snow. To do this, you need to follow a couple of easy steps:

1 ... Place the button code in the desired place on the site:

< input name= "snowbutton" TYPE = "button" onclick= "$("body").snowFall();" title= "Snowflakes!" class= "snowbutton" />

I have a button in the header of my blog. Therefore, I added the code to the header.php file of my wordpress template.

2 ... Add the following style to your stylesheet (usually style.css):

.snowbutton (background: url ("snowflake.png") 100% no-repeat; width: 64px; height: 64px; overflow: visible; margin-top: 80px; margin-left: 740px; cursor: pointer; border: 0 ;)

Here you will need to adjust a couple of parameters:

- path to the button image: background: url ("snowflake.png") 100% no-repeat;.

- location of the button on the site: margin-top: 80px;(padding at the top of the screen) and margin-left: 740px;(left indent).

Of course, you can write completely different styles and use a different button. I just gave an example that is now working on my blog.

By the way, try it. The button is in the blog header, next to the search form:

Good luck friends! Happy New Year and Merry Christmas!

Sweet for today: Nice melody, nice song, nice Christmas video. Enjoy 🙂

Hello everyone! Exactly three years ago I already wrote,. But as it turned out, the script that I then proposed, and the way to install it, turned out to be not entirely clear to many readers of my blog. I was literally inundated with questions, because in that case it was necessary to write additions to the code, upload files to the root folder ... Of course, I had to help everyone who contacted, and this, as you yourself understand, took a lot of time.

But, as they say, time does not stand still. Just yesterday, on the vastness of our omniscient Internet, I accidentally came across an excellent script and now I know another way to install falling snowflakes on the site. For fun, I tried it out. You can see the results for yourself. The script does not slow down the speed of loading pages of the site, almost fits any CMS, does not bother readers - it just creates a good mood!

For those who liked these falling snowflakes, I will tell you the details of how they were made. And they are prepared using this small script:

And that's it! No more file folders or individual files. It is enough to install given code immediately after the opening tag and the New Year mood is already with you.

But all themes are different and in my case I had to install the script elsewhere. I inserted this script into the site header in the header.php file right after the tag and everything works fine.

But I warn you right away that when you work with the theme editor, you must definitely do backup just in case, to play it safe. Suddenly you do something wrong and make a mistake, then you can fix everything without problems with the help of a backup.

From the details I can add that 40 snowflakes with a maximum size of up to 35px are "sewn" into the script. And I also think that these are optimal values. Unfortunately, I could not find out the name of the author of the found publication in order to say thank you very much for the work done.

And snowflakes will decorate not only the site, but will also be an excellent addition to those who will make viral greeting cards for the New Year, if such fans of a good mood are among those reading this article. By the way, you can embed codes in these viral postcards and make money on it.

I hope that this fluffy snowfall will not leave you indifferent either, and you will delight your blog readers with it throughout the upcoming holidays.

If you have any questions, you can ask them in the comments to this article. I wish you all the best and congratulations on the Coming 2015! I look forward to your comments and will be happy to answer them.

There is very little time left until winter, and a large number of webmasters are beginning to create the proper atmosphere on their sites. That's why we present our selection of snow effects for your website.

jSnow - a generic jQuery falling snow script

We'll start our collection with a very nice snow effect that is added to the site using a plugin called "jSnow".

Demonstration:

Agree - beautiful!

In order to install this effect on your site, do the following.

1. Download the archive jsnow.zip at the end of the article. Unzip and upload the contents to your site via FTP or in another way convenient for you.

Unfortunately, with new jQuery versions the script doesn't work, so let's be content with what we have.

3. Front closing tag connect scripts:

This code configures the size of the snowflakes, the height of the area they occupy, the color, and other commented-out parameters.

The script, as you understand, is universal, and instead of round snow, you can add stars, for example, like this:

FlakeCode: ["*"] // Snowflake view

Or a bunch of round snow and stars:

FlakeCode: [".", "*"] // Snowflake view

And also any other symbol (and even the dollar sign - $).

The script is great for decorating the top of the site without overlapping the main content.

Snowstorm - Clever JavaScript Falling Snow Script

Why smart, you ask? Because this script (unlike others discussed in this article) contains additional effect repelling snowflakes. That is, when you move the mouse cursor on your site, snowflakes rush in the opposite direction from it. The further the cursor is from the middle of the screen, the faster the speed of movement of the snowflakes.

Demonstration:

To install this effect on your site, no additional libraries are required. All you have to do is:

1. Download archive snowstorm.zip at the end of the article. Unzip and upload the content to your site in a way convenient for you.

Change the animation of the script as needed.

In addition to the fact that the snowflakes bounce off the cursor, some of them stick to the bottom of the screen, giving the slight impression that the snowflakes are forming a snowdrift.

Snowfall - jQuery falling snow effect with drifts

I like this script most of all, because it implements small snow pellets, and also collects small snowdrifts on the indicated elements.

Demonstration:

This effect takes a little longer to set.

1. If your site does not have jQuery library, include it in the section HEAD:

3. Opening tag assign the class " darkBg»:

4. Front closing tag connect scripts:

5. And in the final stage, assign a class to those elements over which drifts should form:

Class = "collectonme"

If you do not want the formation of snowdrifts on the site, remove the line from the script:

Collection: ".collectonme",

This is a required action, otherwise the snow on your site will not fall.

An excellent script, this is what we used earlier on our site.

Smooth layered falling snow effect in CSS3

Here, as you understand, we will not resort to using all sorts of scripts, but will only manage with pure CSS.

Demonstration:

Magical, isn't it?

In order to establish this effect for yourself, take three simple steps.

1. Download the archive snow_img.zip at the end of the article. Unzip and upload the contents to your site via FTP or file manager hosting.

2. In your stylesheet, paste (preferably at the very bottom):

SnowContainer (width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;) #snow (width: 100%; height: 100%; background-image: url ("/snow/snow_1.png"), url ("/ snow / snow_2.png"), url ("/ snow / snow_3.png"); -webkit-animation: snow 20s linear infinite; -moz-animation: snow 20s linear infinite; -ms-animation: snow 20s linear infinite; animation: snow 20s linear infinite;) @keyframes snow (0% (background-position: 0px 0px, 0px 0px, 0px 0px;) 100% (background-position : 500px 1000px, 400px 400px, 300px 300px;)) @ -moz-keyframes snow (0% (background-position: 0px 0px, 0px 0px, 0px 0px;) 100% (background-position: 500px 1000px, 400px 400px, 300px 300px;)) @ -webkit-keyframes snow (0% (background-position: 0px 0px, 0px 0px, 0px 0px;) 100% (background-position: 500px 1000px, 400px 400px, 300px 300px;)) @ -ms- keyframes snow (0% (background-position: 0px 0px, 0px 0px, 0px 0px;) 100% (background-position: 500px 1000px, 400px 40 0px, 300px 300px; ))

Then save all the changes.

Here is such good selection snow effects that will undoubtedly delight your site visitors.

Good time of the day and Happy New Year. On the eve of the New Year, I want to share with you a very light, beautiful and unpretentious falling snow plug-in. This script is really very lightweight and fits easily into html file without making it difficult to work with yourself html code ohm site. True, you can take it out in separate file... But for convenience, I did everything in one file.

There is not much to say here, it is better to watch a demonstration of this falling snow. In addition, there is a very beautiful background and the inscription "Happy New Year" written nice font"Lobster" from Google. You can easily turn this file into an Internet postcard with congratulations.

Connecting the script of falling snowflakes to the finished site

1. We connect the jQuery library

It is connected like this: between tags and paste the following code:

2. We connect styles

Paste css code into your css file(usually style.css):

#canvas (border: 1px solid black; position: absolute; z-index: 10000;) #flake (color: #fff; position: absolute; font-size: 25px; top: -50px;)

3. Create the snow.js file

Create a snow.js file and paste the following javascript code there:

We include the js file in :

4. Insert html code

Well, the most important thing remains - insert the html code of the falling snow anywhere in :

If you did everything correctly, then snow will start to fall on your site.

Connecting a background image, a large header and falling snowflakes

This variation is different in that it has a background image and a large "Happy New Year" title. It is quite simple to connect this variant of the falling snow script to the site. Necessary:

1. Download the archive and unzip it

2. We connect the jQuery library

It is obligatory to include the jQuery library (it is not necessary if you already have this library connected). It is connected like this: between tags and paste the following code:

3. Connect the "Lobster" font

Similar to connecting the jQuery library, we connect the font for our inscription "Happy New Year":

Naturally, if you do not need this inscription and font, you can not include it, but then in css remove the "font-family:" Lobster ", cursive;" attribute from the H1 attribute, or replace it with your own font

4. We connect styles

Option A. Paste the css code into your css file. Here is the code:

Img.bg (/ * Set rules to fill background * / min-height: 100%; min-width: 1024px; / * Set up proportionate scaling * / width: 100%; height: auto; / * Set up positioning * / position: fixed; top: 0; left: 0;) h1 (font-family: "Lobster", cursive; color: #FFF; font-size: 90px; text-align: center; line-height: 95px; font- weight: normal; margin-top: 300px; text-shadow: 5px 5px 5px # 000;) @media screen and (max-width: 1024px) (/ * Specific to this particular image * / img.bg (left: 50% ; margin-left: -512px; / * 50% * /)) html, body (font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; padding: 0; margin: 0; color: # 333;) .bar (background-color: # 111; color: # f0f0f0; box-shadow: 0px 0px 2px # 333; line-height: 25px; padding: 0px 20px; opacity: 0.7;). bar: hover (opacity: 1;) .bar a (color: #DDD;) .bar a: hover (color: #FFFFFF;) a (color: #FFFFFF; text-decoration: none;) a: hover (color : #CCC;) #canvas (border: 1px solid black; position: absolut e; z-index: 10000; ) #flake (color: #fff; position: absolute; font-size: 25px; top: -50px;) #page (position: relative;)

Option B. You can also create a separate file, for example snow.css, and insert the same code there, although it will need to be included in the head as follows:

5. Connect the falling snow script

Option A. To do this, we need to insert at the very bottom of the site (before closing) the following javascript code:

Option B. As well as with css-code, javascript can be placed in a separate file and also called snow.js and included in the head:

6. Fill the background image

Fill the picture bg.jpg from the archive to the root of your site

7. Insert html code

Well, the most important thing remains - insert the html code of the falling snow:

Falling snow script connected successfully. Be sure to see it at work. All the best!

will take care of the site decoration... You go to the site, and there, falling snow or snowflakes, the spirit of the holiday is felt and a good festive mood is immediately created. Although the snow is virtual, it still pleases. Do you agree? Well, of course. Then, I will tell you today - How to add, enable, install snow or snowflakes on the site.

To do this, there are special plugins with which you can enable falling snow or snowflakes on the site on holidays, and for those who are afraid of modules, there is a script for falling snow on the site. I will present the script to you at the very end of the post. In the meantime, the most simple plugins that are updated and compatible with latest version WordPress.

Snow Flurry plugin - it's snowing on WordPress site

Simple and fully customizable plugin. With the ability to install: maximum size snowflakes; how often new flakes are created; add the minimum and maximum speed of snow falling, the color of the snowflake, as well as the ability to disable the plugin after a specified number of seconds. After installing and activating the plugin, a section with the appropriate name will appear in the admin panel:

Super WFS plugin Let It Snow - add snowfall to your website

WFS Let It Snow Plugin

An excellent plugin in JQuery, with the help of it you can arrange just a real snowfall on the site, that is, white mist. In the settings, you can choose the type of snowfall from four options: light, medium, heavy and white haze. And also, make falling snowflakes only on home page or at all; enable / disable snow; minimum and maximum size of snowflakes; minimal and maximum speed flakes; turn on shadows (for websites with white background):

Configuring WFS Let It Snow Plugin

Here, also after installing and activating the plug-in, the Let It Snow subsection will appear in the settings section, click and configure. Let's go further.

Tribulant Snow Storm - Blizzard on your site

I liked this plugin more, I don't even know why, maybe because of the direction of the snowfall, a blizzard from the snow reacts to the movement of the mouse pointer (if you enable this option). Cool, visitors will love it. More settings: snow color; the number of flakes; animation interval; mobile support; snow melts at the bottom of the screen and the flickering effect:

That's probably all with the modules for decorating the site with falling snow, which are worth paying your attention to. I, too, will throw a blizzard on the blog closer to the New Year. It's a pity if you have a light site background (mine too) have to change white snow to another, for example: blue or blue. Something like that. I almost forgot, all presented plugins are installed in a standard way, through the admin panel - add a plugin and enter its name in the search field.

Now, for those who don't want to mess with plugins, an easy way is how to install falling snow on a website without a plugin .

Falling snow script on the site

Falling snowflakes script is suitable for any website or blog on any platform. You just have to tinker (the script must be uploaded to your hosting), you can use your hosting where your site is located, or you can use a third-party one, for example: free and Google Drive. And so here is the script code:

/ * Snow Fall 1 - no images - Java Script Visit http://rainbow.arch.scriptmania.com/scripts/ for this script and many more * / // Set the number of snowflakes (more than 30 - 400 not recommended) var snowmax = 100 // Set the colors for the snow. Add as many colors as you like var snowcolor = new Array ("# ​​b9dff5", "# b9dff5", "# b9dff5", "# b9dff5", "# b9dff5") // Set the fonts, that create the snowflakes. Add as many fonts as you like var snowtype = new Array ("Times") // Set the letter that creates your snowflake (recommended: *) var snowletter = "*" // Set the speed of sinking (recommended values ​​range from 0.3 to 2) var sinkspeed = 0.6 // Set the maximum-size of your snowflakes var snowmaxsize = 35 // Set the minimal-size of your snowflakes var snowminsize = 8 // Set the snowing-zone // Set 1 for all-over -snowing, set 2 for left-side-snowing // Set 3 for center-snowing, set 4 for right-side-snowing var snowingzone = 1 ////////////////// //////////////////////////////////////////////// /////// // CONFIGURATION ENDS HERE //////////////////////////////////// /////////////////////////////////// // Do not edit below this line 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) (rand = Math.floor (range * Math.random ()) return rand) 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 = snowmaxsize-snowminsize for (i = 0; i<=snowmax;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 snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size+"px"; snow[i].style.color=snowcolor snow[i].style.zIndex=1000 snow[i].sink=sinkspeed*snow[i].size/5 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==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<=snowmax;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 (snowingzone == 1) (snow [i] .posx = randommaker (marginright-snow [i] .size) ) if (snowingzone == 2) (snow [i] .posx = randommaker (marginright / 2-snow [i] .size)) if (snowingzone == 3) (snow [i] .posx = randommaker (marginright / 2 -snow [i] .size) + marginright / 4) if (snowingzone == 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<=snowmax;i++) { document.write(""+ snowletter +"")) if (browserok) (window.onload = initsnow)

Before uploading this script to the hosting, you need to edit it (if necessary), that is, the color of the snow, the amount, the speed, and so on. Then, upload the code to the hosting, and paste the link to it here:

The next step, we insert this construction after the tag in your template and you're done. You will have a snowball on your blog, in the form of snowflakes. And I say goodbye to you, not for long. Good luck.

(function (w, d, n, s, t) (w [n] = w [n] ||; w [n] .push (function () (Ya.Context.AdvManager.render ((blockId: "RA -292864-4 ", renderTo:" yandex_rtb_R-A-292864-4 ", async: true));)); t = d.getElementsByTagName (" script "); s = d.createElement (" script "); s .type = "text / javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore (s, t);)) (this , this.document, "yandexContextAsyncCallbacks");