Hi!
I have not coded much in the last five-six months, so I decided to get back into it by making snow from piggy-backing off my last learning project. I was going to use bezier curves with CSS animation, but discovered that rotating random sized rectangles works well to create a nice effect. It starts out slowly, so it takes about 2 minutes.
http://qcsaxmas.com/snowmaker.html
Suggestions on improving the code are welcome!
Really nice! Are you setting left/top to make the snow move? If so, you may benefit from making a minor change and using translate3d for added performance: https://www.kirupa.com/html5/creating_buttery_smooth_animations.htm
(Also, your title rhymes! haha)
I did use left/top. I tried using translate but I ran into weird things.
http://kvapster.com/sm2.html
I applied translate here and the results are excellent! But I had to use 2200% to cover the the distance of the screen.
100%{transform:translate(20%,2200%) rotate(360deg);opacity:0;}
It looks like the percentages only refer to the size of the object itself.
For translate, you should use values like pixels or preferably vw (viewport width) and vh (viewport height). Percentages in this case are exactly as you describe, relative to the object size, so you should avoid them if possible.
Ok, that works! Looks great on a PC. Not bad on my android phone, but it’s shifty. Hiding the x and y overflow doesn’t seem to have the same effect on the android Chrome browser. I am having trouble pinpointing exactly what is causing the shifting, but it may having something to do with the various sizes of the rotating objects containing the snowflakes.
BTW, I did a cpu test on the difference between the fist snowmaker and the current one. The difference is phenomenal. The original would start out using between 35-40% of the cpu and inch upward to past 50%. (Terrible!) The last one hovers around 4-6% and inch up to 7 or 8%!
:: Copyright KIRUPA 2024 //--
