Create snow effect with CSS3 for blogspot completely without causing lag

 Next Christmas season is also when bloggers race to decorate their blog/website as a habit. Snow is an indispensable effect! However, if you integrate this effect with the script when entering the page, the user feels jerky, stiff, and very uncomfortable.

snow effect in blogger

With the strong development of CSS3, it is possible to create this effect without using scripts. You will reduce the lag above. See the demo below

To proceed with the integration, do the following.

Log in to your blog admin page and go to the HTML editor.

Paste the following code in front of the closing </body> tag. 

<style type = "text / css">
.snow-container {position: fixed; width: 100%; max-width: 100%; z-index: 99999; pointer-events: none; overflow: hidden; top: 0 ; height: 100%}
.snow {display: block; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; -webkit-transform: translate3d (0, -100%, 0); transform: translate3d (0, -100%, 0); - webkit-animation: snow linear infinite; animation: snow linear infinite}
.snow.foreground {background-image: url ( "https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");-webkit-animation-duration:15s;animation-duration:10s}
.snow.foreground.layered {-webkit- animation-delay: 7.5s; animation-delay: 7.5s}
.snow.middleground {background-image: url ("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png"); - webkit-animation-duration: 20s; animation-duration: 15s }
.snow.middleground.layered {-webkit-animation-delay: 10s; animation-delay: 10s}
.snow.background {background-image: url ("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow -small-1ecd03b1fce08c24e064ff8c0a72c519.png "); - webkit-animation-duration: 25s; animation-duration: 20s}
.snow.background.layered {-webkit-animation-delay: 12.5s; animation-delay: 12.5s}
@ - webkit-keyframes snow {0% {- webkit-transform: translate3d (0, -100%, 0); transform: translate3d (0, -100%, 0)} 100% {- webkit-transform: translate3d (5%, 100%, 0); transform: translate3d (5%, 100%, 0)}}
@keyframes snow {0% {- webkit-transform: translate3d (0, -100%, 0); transform: translate3d (0, -100%, 0)} 100% {- webkit-transform: translate3d (5%, 100 %, 0); transform: translate3d (5%, 100%, 0)}}
</style>
<div class = 'snow-container'>
        <div class = 'snow foreground'> </div>
        <div class = 'snow foreground layered'> </div>
        <div class = 'snow middleground'> </div>
        <div class = 'snow middleground layered'> </div>
        <div class = 'snow background'> </div>
        <div class = 'snow background layered'> </div>
</div>

Save the sample and check the results.

Custom:

• Host 3 links photos to your account for safety. If using default and the image link is broken, CMT will send a new image link
• You can use the b: if tag to specify when the snow starts to fall. For example, don't want it to fall on post pages and static pages

<b: if cond = 'data: blog.pageType not in {"static_page", "item"}'>
// Insert snow code here
</ b: if>

With this simple trick you can decorate your blog more splendidly to welcome Christmas and New Year already. Good Luck!