How to Do Website Snowing Effect?
The weather outside may be frightful, but, the snow effect on Ukietech’s website is delightful!
Many successful companies leverage and utilize any and all marketing arrows in their quiver. You will see the most visited sites on the planet like Google and Yahoo employ cool holiday-themed effects on their websites to create a festive, warm and inviting experience.
We wouldn’t want you to be left out of any reindeer games. And, since it is Christmas you might want to add some holiday-themed special effects to your website that would be attractive, interesting, yet relevant and appropriate. Since it’s the winter season, why not create the winter festiveness on your website too ;)? This is actually a pretty easy task.
All you need is a little of Java-script code and several nice pictures of snowflakes. Let's start with the pictures. To create the snowing effect, 5-6 different pictures of snowflakes in .png format and with transparency would be enough, as they will be appearing repeatedly. The image size can be arbitrary, but better not make them too big or too small.
When the pictures are done, let’s move up to the programming. We use jQuery in our script. First, define the variables:
var snow_intensive = 400,
snow_speed = 20000,
snow_src = new Array ( '/images/snows/1.png', '/images/snows/2.png', '/images/snows/3.png', '/images/snows/4.png', '/images/snows/5.png');
We define the intensity of snowflakes falling in the first line, the speed of falling in the next one, and in the last line we create an array, which indicates what pictures will be used as snowflakes.
Now we need to set a timer, which will trigger periodically and launch the function of snowing:
function snow_start () {
snow_id = 1;
snow_y = $ ("body").height()-30;
setInterval (function () {
snow_x = Math.random ()*document.body.offsetWidth-100;
snow_img = (snow_src instanceof Array
? snow_src[Math.floor(Math.random()*snow_src.length)]
: snow_src);
snow_elem = '
<img class = "png"
id = "snow' + snow_id + '"
style = "position: absolute;
left:' + snow_x + 'px;
top: 0;
z-index: 10000"
src = "' + snow_img + '">';
$ ("Body").Append (snow_elem);
snow_move(snow_id);
snow_id++;
}, Snow_intensive);
}
Here we set the coordinates of the snowflakes. The coordinates of snowflake images above the screen are set on the Y-axis. On the X-axis the random values are being generated. Then we create an element of a picture and set a random address from our array of pictures for it. After that, we add the created element to the element “Body” and call the function of snowflakes animation, which has the following code:
function snow_move (id) {
$ ('# Snow' + id). animate ({
top: snow_y,
left: "+ =" + Math.random () * 100},
snow_speed, function () {
$ (This). Empty (). Remove ();
});}
Now we only need to add firing of our function when loading the page:
$(Document).Ready (snow_start);
Here we go! In such a simple way you can create a holiday atmosphere on your website.
See also: How to create a jQuery plugin
