Good 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 plugin. This script is really very light and easily fits in an html file, without making it difficult to work with html code om site. True, it can be placed in a 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 very beautiful background and the inscription "Happy New Year" written beautiful font"Lobster" by Google. You can easily turn this file into an online greeting card.

Connecting the falling snowflakes script to the finished website 1. Connect the jQuery library

It connects like this: between the tags and insert the following code:

2. Connect styles

Paste the 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

Let's create a file snow.js and insert the following javascript code there:

var t = setInterval(function())( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity = 0.5 + Math.random( ); var sizeFlake = 10 + Math.random() * 20; var endPositionTop = documentHeight - 40; var endPositionLeft = startPositionLeft - 100 + Math.random() * 200; var durationFall = documentHeight * 10 + Math.random() * 5000; $("#flake") .clone() .appendTo("body") .css(( left: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake ) ) .animate(( top: endPositionTop, left : endPositionLeft, opacity: 0.2 ), durationFall, "linear", function() ( $(this).remove() ), 500); var snow = (); var snowflex = (); snowflex.create = function( snowflex)( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex. style.top = - 50 + Math.random() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; flex.style.position = "absolute"; .color = "#F3F3F3"; flex.style.opacity = Math.random(); document.getElementsByTagName("body").appendChild(flex); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parseInt(flex. style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) ( clearInterval(t) ; document.getElementsByTagName("body").removeChild(flex) ), 45 + Math.random() * 20); snow.storm = function())( var t = setInterval(function())( snow.snowflex(); ), 500); ); //snow.storm(); var fog = (); fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.closePath(); ctx.fill()); fog.start = function())( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function())( x = 300 + 300*Math.sin(x); y = 300 + 300* -Math.cos(x); x += 2; //fog.start();

We include the js file in:

4. Insert the html code

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

❄

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

Connection background picture, big headline and falling snowflakes

This option is different in that it has background image and a big "Happy New Year" heading. Connecting this version of the falling snow script to your website is quite simple. Need to:

1. Download the archive and unzip it 2. Connect the jQuery library

Be sure to include the jQuery library (not necessary if you already have this library included). It connects like this: between the tags and insert the following code:

3. Connect the font "Lobster"

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

Naturally, if you don’t need this inscription and font, you don’t have to include it, but then in the css, remove the “font-family: “Lobster”, cursive;” from the H1 attribute, or replace it with your own font

4. Connecting styles

Option A: Paste the css code into your css file. Here's 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: absolute; 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 paste 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 the following javascript code at the very bottom of the site (before closing):

var t = setInterval(function())( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity= 0.5 + Math.random( ); var sizeFlake= 10 + Math.random() * 20; var endPositionTop= documentHeight - 40; var endPositionLeft= startPositionLeft - 100 + Math.random() * 200; var durationFall= documentHeight * 10 + Math.random() * 5000; $("#flake") .clone() .appendTo("body") .css(( left: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake )) .animate(( top: endPositionTop, left : endPositionLeft, opacity: 0.2 ), durationFall, "linear", function() ( $(this).remove() ), 500); var snow = (); var snowflex = (); snowflex.create = function( snowflex)( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex. style.top = - 50 + Math.random() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; flex.style.position = "absolute"; .color = "#F3F3F3"; flex.style.opacity= Math.random(); document.getElementsByTagName("body").appendChild(flex); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parseInt(flex. style.top) + 5 + "px"; flex.style.left = parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) ( clearInterval(t) ; document.getElementsByTagName("body").removeChild(flex) ), 45 + Math.random() * 20); snow.storm = function())( var t= setInterval(function())( snow.snowflex(); ), 500); ); //snow.storm(); var fog = (); fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.closePath(); ctx.fill()); fog.start = function())( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function())( x = 300 + 300*Math.sin(x); y = 300 + 300* -Math.cos(x); x += 2; //fog.start();

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

6. Fill the background image

Upload the image bg.jpg from the archive to the root of your site

7. Insert the html code

Well, the most important thing left is to insert the html code of the falling snow:

Happy New Year! ❄

The falling snow script has been successfully connected. Be sure to watch it in action. All the best!

But first, I would like to answer comments on the topic - when will the next part be released? I will answer you there that we are now, as I wrote in the New Year’s greetings, officially switching to video, so the fourth part will appear in video format, as well as in an abbreviated text format. The release date is planned for February this year. Now, actually, let's talk about the SnowFall plugin.

In the sources of the material, I indicated a link to GitHub of the developer of this plugin, where he describes everything in detail and shows a demo version of his script, and in various examples. I personally wanted to introduce you to only one example, which seemed very convenient to me and took a minimum of time to develop and implement in my project.

First step. HTML.

First, let's include the necessary libraries js and style files css. And so, this plugin works without a library jquery.min.js, so we just connect the plugin’s native library snowfall.min.js.

Regarding styles, we will use our standard styles file demo.css.

Now, to give the impression that snowflakes are falling on the snow, we create a graphic image fon.jpg and save it in a folder img the same as in the demo version. Well, again, this is just an example, it all depends on your imagination and needs.

After this, we create, in fact, the block container itself div with ID content, in which we will launch our plugin of falling snowflakes on the site. Among the parameters, it is worth considering that minSize sets the minimum snowflake size to 5 pixels, and the maximum snowflake size maxSize equals 12 pixels. Adjust the size of the snowflakes yourself to whatever you need.

snowFall.snow(document snow.body, (round: true, minSize: 5, maxSize:12));

Second step.

CSS. css Let's move on to the second step, namely styles . In our example, all the styles are only needed for design, and do not need the full functionality of the script! All styles are designed to be positioned correctly fon.jpg graphic image

, so see for yourself whether you need them or not.

Hello everyone dear friends! Even though winter is over, I still want to tell you how to create falling snowflakes on a WordPress site to remember the winter days a little :-). We will make falling snowflakes using a script and a plugin.

How to make falling snowflakes in WordPress using a plugin?

Surfing the Internet in search of best option I chose the plugin – WP Super Snow. In some articles I came across other options, but in all of them the authors have not been updating their creations for a long time. And WordPress is constantly updated and developed. Therefore, here you need to constantly support your project so that it is compatible with all versions.

So, let’s go to the Plugins – Add New section and install the falling snowflakes plugin for WordPress.

Click on the Install button and do everything as usual. By the way, if you still don’t know how, then my article will help you with this.

Great! We installed and activated the plugin. After this, a Super Snow section will appear on the left side of your WordPress admin panel.

Once inside you will see that the plugin is disabled and needs to be enabled.

Now we will go over the basic settings.

The first section is Deactivation Safeguards - we leave the first item in the drop-down list as is, do not change anything. Moreover, it is recommended. Here we are simply warned that if you remove the plugin from the general menu, then nothing is lost. If you want to erase all traces of the plugin on the site, then you should click on the first option. Shown here:

In this section, you can set the sizes of falling snowflakes and their number, add your own version of snowflakes, and indicate in which tag they should be installed. By default, everything is wrapped in the body tag. You can override it. You can also specify the delay in seconds of falling snowflakes on the site, effects.

The next last option is to display falling snowflakes on pages and posts. Remember that there will be no snow on mobile devices, because it is simply excluded there.

For example, you can trigger falling snowflakes only on specific pages by specifying this using a special function (They are listed on the page)

Here are examples of functions:

Wp_is_mobile () && is_page ("christmas-promo") - if this page is not mobile, then show on the Christmas-promo page

Wp_is_mobile () && ! is_ssl() – do not show if it is not mobile device and not protected https protocol and SSL

Wp_is_mobile () && time () >= strtotime ("2015-12-01" ) && time () we connect our script with this line:

For clarity, I’ll show you where I inserted it:

Be sure to save all changes and this is what you should get on the site:

Now you can “play around” with our snowflakes on the site, that is, set their speed, size, number of snowflakes themselves and other parameters. To do this, we need to make small changes to the script.

Paste the following code below into the footer area:

snowStorm.snowColor = "#99ccff"; // bluish snowflakes, color can be changed snowStorm.flakesMaxActive = 100; // Show the number of snowflakes on the page snowStorm.useTwinkleEffect = true; // flickering effect

In the template it will all look like this:

Now let's see what happens in the browser:

As we can see, our snowflakes on the site have become a soft bluish color, it looks like real snowfall on the site :)

Other snowflake script settings

In order to tinker with the script even more, I’ll go through other options.

snowStorm. autoStart = true ;

— choice between whether snow will automatically appear when the page loads or not.

snowStorm. animationInterval = 33 ;

— measurement of the interval of milliseconds per frame. At value = 20 it is fast and smooth, but will load the processor. If you set = 50, then it is more conservative, but slower.

snowStorm. flakeBottom = null ;

— limiting the sticking of snow to the bottom of the page. If not specified, the snow will simply stick to the bottom of the site page and disappear with scrolling or scrolling.

snowStorm. flakesMax = 128 ; — setting the maximum number of snowflakes falling in any part of the page per unit of time. snowStorm. flakesMaxActive = 64 ;

— sets the limit of falling snowflakes (i.e. moving on the screen and considered active).

snowStorm. followMouse = true ;

snowStorm. snowStick = true ;

— the parameter allows snowflakes to “stick” to the bottom of the screen; when turned off, the snow will never settle to the bottom of the screen.

snowStorm. targetElement = null ; - here it’s a little more complicated, I understood it as the html element is written by default into the body of the document (body ). Can be a string ID element, such as 'myDiV' or a DOM reference. Something like this. snowStorm. useMeltEffect = true ;- supported by

this parameter

fallen snow

will melt when the value is turned on.

snowStorm. useTwinkleEffect = true ;

— allows the snow to flicker out of sight as it falls. snowStorm. usePositionFixed = false ;

- if the boolean value is true - the scrolling window will not affect the falling snow, i.e. it will go on and on. This significantly increases the load on the processor. The default is false. snowStorm. vMaxX = 8 ; snowStorm. vMaxY = 5 ;— the value of the speed of snowflakes in x and y for the storm. A random variable in this range is selected for each snowflake. That's all, dear friends, it is quite possible that I made a mistake somewhere in explaining the script settings, then please correct me. In general, everything works great for me and is pleasing to the eye. Thank you for your attention, I look forward to your comments and discussions. I have a question for you - what effect do you use for the site when winter comes? 🙂 will take care of website decoration . You go to the site, and there, snow or snowflakes fall, you feel the spirit of the holiday and immediately create a good holiday mood. Although the snow is virtual, it still makes me happy. Do you agree? Well, of course. Then, today I will tell you - How to add, enable, install snow or snowflakes on the site. There are special plugins for this, with which you can

holidays

enable falling snow or snowflakes on the site, 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, which are updated and compatible with

latest version

WordPress.

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

Setting up WFS Let It Snow Plugin

Here, also after installing and activating the plugin, the Let It Snow subsection will appear in the settings section, click and configure. Let's move on.

Tribulant Snow Storm - a blizzard on your site

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

That’s probably all with modules for decorating a website with falling snow, which are worth paying your attention to. I’ll also have a snowstorm on the blog closer to the New Year. It’s a pity that if you have a light website background (I do too), you’ll have to change the white snow to something else, for example: blue or cyan. Something like that. I almost forgot, all the 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 .

Script of falling snow on the site

The 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(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 Design > Add HTML/JavaScript gadget. Paste the code into the window.

After inserting the code into the gadget, it is advisable to raise it as high as possible. This is not difficult to do, grab the HTML/JavaScript gadget with the left mouse button and drag it up under the template and release it, it didn’t work the first time, repeat again.