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 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 a 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 libraryIt 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 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"; .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(); 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); //fog.start();
We include the js file in:
4. Paste 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 a background image and a large "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"; .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(); 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); //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!
Hi all! Exactly three years ago I already wrote. But as it turned out, the script that I offered then and the method of installing 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 add additions to the code, upload files to the root folder... Of course, I had to help everyone who asked, 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 all-knowing Internet, I accidentally came across an excellent script and now I know another way to install falling snowflakes on a website. For fun, I tried it out. You can see the results for yourself. The script does not slow down the loading speed of site pages, fits almost any CMS, does not bother readers - it simply creates a good mood!
For those who liked these falling snowflakes, I will tell you the details of their “making”. And they are prepared using this small script:
That's all! No more file folders or individual files. It is enough to install this code immediately after the opening tag and the New Year's mood is already with you.
But all themes are different and in my case I had to install the script in a different location. This script I inserted it into the header.php file in the header.php file immediately after the tag and everything works fine.
But I warn you right away that when you work with the theme editor, you must do backup copy just in case, to be on the safe side. If you do something wrong and make a mistake, then you can fix everything without problems using a backup copy.
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 this is optimal values. Unfortunately, I was never able to find out the name of the author of the publication I found in order to thank him 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 there are such fans of good mood among those reading this article. By the way, you can embed codes into these viral cards and make money from 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 congratulate you on the upcoming 2015! I look forward to your comments and will answer them with pleasure.
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.
That is, in this article we will analyze two absolutely working methods. There you will decide for yourself which option is preferable to you. So let's get down to the practical part of the lesson.
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 redefine 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 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 secure protocol https 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 settingsIn 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 value maximum quantity 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 ; — allows the snow to move on the site with the “wind” in relation to the movement of the mouse along the X axis (right/left).
snowStorm. freezeOnBlur = true ; — stop the snowflake effect when the user is in at the moment exits the browser window, for example goes to another tab, then the snow stops. This saves CPU and is more pleasant for the user.
snowStorm. snowColor = "#fff" ; — white color of snow (do not eat or use yellow snow on the site :-))
snowStorm. snowCharacter = " " ; — . ( ) = bullet. · entity(·) is not used because it is considered a square in some systems. Any change may cause our snowflake to be cut off and may also cause the flakeWidth/flakeHeight to change, so be careful.
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 that.
snowStorm. useMeltEffect = true ; — with the support of 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.
Snow Flurry plugin - it’s snowing on the WordPress site
A simple and fully customizable plugin. With the possibility of installation: maximum size snowflakes; how often new flakes are created; add the minimum and maximum speed of snow falling, the color of the snowflake, and also 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 plugin WFS Let It Snow - adds snowfall to your siteWFS Let It Snow plugin
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 speed cereal; 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 this. 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 siteThe 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
