How To Add best Snow Falling Effect with css for Blogger 2013-Tricks Donor

Wednesday 2 January 2013

How To Add best Snow Falling Effect with css for Blogger 2013

Posted by Unknown | 07:31 Categories: Blogger, Blogger Tricks

Click below to view the demo

How to add new and best snow falling effect for blogger blogs, the steps listed below are extremely straightforward and would hardly take less than 5 minutes to complete. Follow the instructions as mentioned below.

Go to Blogger.com >> Template >> Edit HTML >> Proceed.

Now in the template Search for Skin and above it paste the Following CSS coding.

* --- Tricks Donor Best Falling Snow For Blogger --- */
#td_snowflakes {
    position: absolute;
    height: 950px;
    width: 966px;
    overflow: hidden;
  
}
#snowContainer > div
{
    position: absolute;
    width: auto;
    height: auto;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-direction: normal, normal;
    -webkit-animation-timing-function: linear, ease-in;
}
#snowContainer > div > img {
     position: absolute;
     width: auto;
     height: auto;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-transform-origin: 50% -100%;
}
@-webkit-keyframes fade
{
    0%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }
}
@-webkit-keyframes drop
{
    0%   { -webkit-transform: translate(0px, -50px); }
    100% { -webkit-transform: translate(0px, 650px); }
}
@-webkit-keyframes clockwiseSpin
{
    0%   { -webkit-transform: rotate(-50deg); }
    100% { -webkit-transform: rotate(50deg); }
}
@-webkit-keyframes counterclockwiseSpinAndFlip
{
    0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }
    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}

Once again in the template, search for <body and just below it paste the following Html coding.

<script charset="utf-8" src="http://dl.dropbox.com/u/124897262/tricksdonor.js" type="text/javascript"></script>
<div id="td_snowflakes">
<div id="snowContainer">
</div>
</div>

Save your template....Now all done...Now visit your site and enjoy the picture perfect result....

Hit +1 or LIKE on fbpage to thank us!

No comments