CSS only snow fall

[meetdilip]

Is it possible to add snow fall to a forum with css alone ? If yes, would be great if someone can help with this.

[Shikkediel]

How about this one…

https://codepen.io/NickyCDK/pen/AIonk

[Shikkediel]

Like this the syntax’s slightly more appropriate:

Demo

Maybe there’s a way to make it a bit more continuous as well, without it shifting back towards the starting point every time…

Edit – made some changes, runs smoother now.

[meetdilip]

Thank you @Shikkediel

[Freelancer1511]

Neat work @Shikkediel

[Shikkediel]

Cheers guys, decided to use it on one of my own hobby sites too (inside the header only)…

http://tamiyaweb.com/

Piece of cake to make it work. B-)

[JaG]

That looks good. Eventually I hope to able to understand all this. Only started doing this when I retied a few years ago so still on a steep learning curve.

[JaG]

That looks really good too.

[Shikkediel]

The idea is quite basic, it’s three layers of background images that get their background-position animated differently with CSS in a 10 second loop. You could call it a parallax effect, giving the illusion of depth. All credit to the original creator of course because the effect is nice and it’s still pretty light on resources. Just tweaked it a bit.

[JaG]

Am I right in assuming the html goes in the header and css in the body.

[Shikkediel]

If you’d like it to snow only inside the header of your page then the div should indeed be pasted there.

But style can only validly be placed in the HTML headsection, inside <style></style> tags…

I edited my earlier reply, I was confusing myself with the terms header and head.

:-/

[JaG]

Thank you for your advise. I shall look at it later.

[Beverleyh]

Shikkediel, the snow animation you linked to was a good choice for me too a few days ago, but I hit a few performance problems with the images’ animated background-positions. I converted it to less-costly transforms and documented it here if you’re interested http://blog.fofwebdesign.co.uk/37-css-animations-performance-gone-bad-and-how-to-fix-it

[Shikkediel]

Interesting read indeed. But for some reason the snow is not animating with Firefox on the page with the rewritten code?

Edit – not sure if it is breaking things with FF but I noticed a typo in the webkit animation:

@-webkit-keyframes snow-1 {
    0% { -webkit-transform:translate3d(0,0,0) }
    50% { -webkit-translate3d(500px,500px,0) }
    100% { -webkit-translate3d(500px,1000px,0) }
    }

@-webkit-keyframes snow-2 {
    0% { -webkit-translate3d(0,0,0) }
    50% { -webkit-translate3d(100px,200px,0) }
    100% { -webkit-translate3d(0,400px,0) }
    }

@-webkit-keyframes snow-3 {
    0% { -webkit-translate3d(0,0,0) }
    50% { -webkit-translate3d(-100px,150px,0) }
    100% { -webkit-translate3d(0,300px,0) }
    }

Only the first one has transform included…

I suspect that may be it though, Mozilla seems to have included webkit prefixed support at some point. The first rule of the broken animation could be keeping the other one at the beginning.

[Beverleyh]

Thanks for letting me know about the typo. I hadn’t noticed so I appreciate you piping up :) The real-world setup is one of those rare cases when the web page is only displayed via a batch of identical laptops/TVs using a single browser instance, so I might include that in the write-up to explain the lack of other vendor prefixes and the fixed size layout.

[Author]

Posts