Author

Analytics advocate

SEO expert

User Experience passionate

Follow me on
Category | UX
Difficulty |

How to Add Snow Effect to Any Part of Your Site with CSS Animation

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 Snow Effect Using Only CSS

  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 important 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 on places where it doesn't distract your reader. Also, consider users that might be sensible to this type of animations (dyslexics and autistics).

I added the following small script that you can add wherever you show the animation to 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 sensible 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.
Author

Analytics advocate

SEO expert

User Experience passionate

Follow me on
Be the first to comment :)