There is very little time left until winter, and a large number of webmasters are beginning to create the proper atmosphere on their sites. On this occasion, we present our selection of snow effects for your website.
jSnow – universal falling snow script in jQueryWe'll start our selection with a very beautiful effect snow, which is added to the site using a plugin called “jSnow”.
Demonstration:
Agree - beautiful!
To install this effect on your website, do the following.
1. Download the jsnow.zip archive at the end of the article. Unzip and upload the contents to your website via FTP or other method convenient for you.
Unfortunately, with new versions jQuery script doesn't work, so we're content with what we have.
3. Before Use the closing tag to include scripts:
$(document).ready(function() ( $("body").jSnow(( vSize: 100, // Flakes area size: 30, // Number of snowflakes flakeColor: ["#fff"], // Color flakeMinSize : 10, // Minimum size of a snowflake flakeMaxSize: 20, // Maximum size of a snowflake fallingSpeedMin: 1, // Minimum speed of a snowflake fallingSpeedMax: 2, // Maximum speed of a snowflake flakeCode:["."] // Type of snowflake )); ) );
This code adjusts the size of the snowflakes, the height of the area they occupy, color and other commented parameters.
The script, as you understand, is universal, and instead of round snow you can add stars, for example, like this:
FlakeCode:["*"] // Snowflake appearance
Or a bunch of round snow and stars:
FlakeCode:[".", "*"] // Snowflake appearance
As well as 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 – a smart falling snow script in JavaScriptWhy smart, you ask? Because in this script (unlike others discussed in this article) there is an additional effect of 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 snowflakes move.
Demonstration:
To install this effect on your site, no additional libraries are required. All you need to do is:
1. Download the snowstorm.zip archive at the end of the article. Unzip and upload content to your site in a manner convenient for you.
window.onload = function() ( snowStorm.snowColor = "#fff"; // Color of snowflakes snowStorm.flakesMaxActive = 100; // Maximum amount visible snowflakes snowStorm.followMouse = true; // true - chase the cursor, false - no snowStorm.snowCharacter = "."; // Snowflake view);
If necessary, make changes to the script animation.
In addition to the fact that the snowflakes are pushed away from the cursor, some of them stick to the bottom of the screen, creating a slight impression of the snowflakes forming a snowdrift.
Snowfall – effect of falling snow with snowdrifts using jQueryI like this script the most, because it implements fine snow grains and also collects small snowdrifts on the specified elements.
Demonstration:
This effect takes a little longer to install than others.
1. If your site does not have the jQuery library, include it in the HEAD section:
3. Assign the class “darkBg” to the opening tag:
4. Before include the scripts with the closing tag:
$(document).ready(function() ( document.body.className = "darkBg"; $(document).snowfall((collection: ".collectonme", flakeCount: 200 // Number of snowflakes )); ));
5. And at the final stage, assign a class to those elements over which snowdrifts 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 mandatory action, otherwise snow will not fall on your site.
Excellent script, this is exactly what we used on our website before.
Smooth layered falling snow effect using CSS3Here, as you understand, we will not resort to using all sorts of scripts, but will make do with pure CSS.
Demonstration:
Magical, isn't it?
In order to install this effect for yourself, take three simple steps.
1. Download the snow_img.zip archive at the end of the article. Unzip and upload the contents to your website via FTP or file manager hosting.
2. In your style file, insert (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 400px, 300px 300px; ) )
Then save all changes.
Like this good selection snow effects, which will undoubtedly delight your site visitors.
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 lightweight and easily fits into html file without making it difficult to work with yourself html code om site. True, it can be taken out into 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 in a beautiful "Lobster" font from 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 libraryIt connects like this: between the tags and insert the following code:
2. Connect styles
Paste the css code into your css file(usually this is 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 fileLet'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"; flex.style .color = "#F3F3F3"; flex.style.opacity = Math.random(); document.getElementsByTagName("body").appendChild(flex); return 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.draw(ctx, x, y); ), 100); ); //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.
Connecting a background image, a large header and falling snowflakesThis 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 libraryBe 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 stylesOption 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"; flex.style .color = "#F3F3F3"; flex.style.opacity= Math.random(); document.getElementsByTagName("body").appendChild(flex); return 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.draw(ctx, x, y); ), 100); ); //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 codeWell, 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!
Webdesign with jQuery is very easy! "Falling Snow" on the websiteAs the New Year approaches, two things appear on most websites: “falling snow” and a page of sales and discounts. Both are done very simply. Snow - with help jQuery plugins, and discounts and sales by depicting a larger number crossed out with a thick red line above the price tag, supposedly corresponding to the old price.
However, we are now only interested in placing “falling snow” on the site page. There are several for this simple options. Let's look at two of them based on jQuery.
We start installing “falling snow” by creating a new folder, naturally named snow , then download archive and unpack it into this folder. We will have two scripts jquery-1.8.3.min.js and jquery.snow.js in it.
Next, you need to add to the page header inside the tag ... the following lines indicating the paths to these scripts, and a small JavaScript to initialize the “falling snow”:
$(document).ready(function())(
$.fn.snow();
});
In order for snow to appear on the site page, just add inside the tag
.
This plugin has only four settings. They are located at the very beginning of the jquery.snow.js file and can be changed in any editor or in Notepad:
minSize: 10 , // minimum size snowflakes
maxSize: 20 , // maximum size of a snowflake
newOn: 500 , // frequency of appearance of snowflakes in ms, that is, snow density
flakeColor: "#bbbbbb" // color of snowflakes
Also note the z-index:10 value for snow, which is set in the first lines of the jquery.snow.js file. It sets the position of snowflakes on top of sliders (slide shows) and drop-down menus, if your page has them.
Second version of "falling snow"
For this option, you use your own pictures of snowflakes, as shown in Fig. 1. Thanks to this, the plugin is more colorful, and in addition, it can be successfully used for other effects. For example, by replacing pictures of snowflakes with rose petals, you can decorate the page of a wedding website, and falling daisies will fit in on a website about a summer vacation.
Fig.1. "Falling Snow" on the website
To install, we again use the snow folder, only now we’ll unpack another one into it archive, in which, in addition to scripts, there are four different images snowflakes. Next, similar to the first example, inside the tag... insert lines indicating the paths to the new “falling snow” files:
And finally, add the line inside the tag (preferably at the beginning of the page)
.
If you don’t have snow, make sure you enter the full address of the snowflake images correctly in the following line of the snow.js file:
var img=" 
Adjustment of snow density is specified in the same file by a numeric argument in the line
setTimeout("snow("+id+");",100 ); // frequency of snowflakes,
and the speed of movement of snowflakes in a line
$("#snow_"+id).animate((top:"150%",left:""+end_x+"%"),20000 ,function() // snowflakes movement speed
Also, as in the first option, pay attention to the z-index:10 value so that the snow overlaps the sliders, drop-down menus, etc. located on the page.