Author

Analytics & GTM Developer

Optimizer Troubleshooter

Follow me on
Category | UX
Difficulty |
on December 21, 2016 Updated December 20, 2020

A simple way of adding a snow effect to any element of your site

A couple of days ago I added a snow effect to the cover section of my posts, and people started asking me what kind of magic I used to achieve this.

The truth is that it is pretty simple, in less than 5 minutes you can add this amazing effect to any part of your site.

How to add a snow effect using only CSS animations

  1. Locate your file style.css or the CSS plugin you use for customizations.
  2. Copy the following code at the end of the file

    .snow{
    background-image:
            url(https://i.imgur.com/uYjnk8N.png),
               url(https://i.imgur.com/iAGD6MA.png),
               url(https://i.imgur.com/hIJDjbg.png);
    animation: snow 30s linear infinite;
    }

    @keyframes snow {
        0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
        100% {background-position: 500px 1000px, 400px 400px, 300px 300px}
    }

  3. Now add the class snow to any HTML element where you want to add the effect. For example,
    <div class="snow"> </div>
    If you don't see the effect, make sure there are no other css rules overriding the snow background. If that the case, you can try adding the "!important" property to the end of each property, for example, -> width: 100% !important; 
     
    Create a snow effect with CSS animation
Add a Stunning CSS Snow Animation to Any Part of Your Site in 5 MinutesClick To Tweet

This is the easiest way of adding a snow effect anywhere on your site. If you want to see other more complex animations using CSS and JS you can find a lot of variations on CodePen snow effects.

 A word of caution, try using this effect in places where it doesn't distract your reader. Also, consider users that might be sensitive to this type of animations (dyslexics and autistics).

The following small will allow the user to stop the animation.

Allow the user to stop the animation

This part is not required for the effect to work, however, it is recommended so users sensitive to animations can disable it.

  1. Locate a part of your page where you can add <script> tags. Usually in the head section or footer. If you use WordPress adding it directly on the page editor may not work.
  2. Copy the following code (jquery is required)
    <script>
    jQuery( document ).ready(function() {
            jQuery( ".snow" ).append('<a title="stop animation" style="cursor:pointer;font-size: 14px;text-transform:uppercase;padding: 3px 5px 3px 10px;position:absolute;color: #ffffff;bottom: 1%;border-radius:4px;left:1%;background: #03A9F4;z-index: 999999;text-align: center;" class="stop-snow">▌▌animation</a>');
            jQuery('.stop-snow').on('click', function () {
                    jQuery('.snow').removeClass('snow');
                    jQuery('.stop-snow').hide();
            });
    });
    </script>
  3. Any element that has the class snow will show the button "▌▌ Animation", once the user clicks there the animation and the button will disappear.
    Give it a try it in any of the areas with animations above.