How to Add Christmas Snow Falling Effect For Blogger

Posted by Lasantha Bandara on December 4th, 2017 File Under : jquery0 Comment

Christmas is very near, so you may need to give special feeling about the Christmas to your website visitors. This tutorial tell you how to add jQuery based Christmas snow falling effect for your blogger blog or any other normal website.

You can see a DEMO of this snow falling effect.

To display snows on you web page, add below code just before </head> tag of your website. (If you using Blogger, go to "Edit HTML" page to add this code.)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {

    $(document).snowfall({
        flakeCount : 400,
        flakeColor : "#ffffff",
        flakeIndex: 999999,
        minSize : 1,
        maxSize : 4,
        minSpeed : 2,
        maxSpeed : 8,
        round : true,
        shadow : false,
    });

});

//]]>
</script>

Note:

1. If jQuery is already have been added into your theme, remove these 2 lines from the above code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js' type='text/javascript'></script>

2. You can change pink colored values of above code as you like. But it is optional.

Save your template and refresh your blog/website to see the snow falling effect.

File Under : jquery

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.