2 Easy Way to Add Snow Falling Effect to Your Website

      1 Comment on 2 Easy Way to Add Snow Falling Effect to Your Website

With less than a couple of week to go until Christmas almost all the website owners might start searching for the easy method to add snow falling effect to website  to greet their website visitors.

This tutorial will teach you two easy methods to Add Snow Falling effect to Your Website, One using a WordPress plugin and another using CSS

1 ) Add snow Falling effect to your website using WordPress plugin.

The majority of the website owners are using WordPress as CMS for their website, so I prefer to explain how the snow falling effect can be implemented in your WordPress site.

How to add Snow Falling effect

Lot of plugins are there in WordPress for adding snow falling effect, but I prefer WP Super Snow. This is an awesome free Christmas snow falling plugin which is using jQuery and CSS3, so this won’t slow down your website speed.  This WordPress Snow falling plugin provides various configuration options in your Dashboard, from there you can choose your favorite snow falling effect.

2) Add snow Falling effect to your website using CSS.

You can even add falling snow effect to your website with CSS alone, below method will explain it for you.

First add a div tag with id “snow” anywhere in your page and just close it, No content need inside that tag.

<div id="snow">
</div>

Next add below CSS code to your stylesheet.

body { background-color:#333; }
#snow{
background: none;
font-family: Androgyne;
background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:1;
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

Now you can see animated snowflakes as background of your website.

 

One thought on “2 Easy Way to Add Snow Falling Effect to Your Website

  1. Pingback: Top 10 Trending Christmas Hashtags for Instagram - TechiesTips

Leave a Reply

Your email address will not be published. Required fields are marked *