In this article, we are going to build a container that generates rain by using JS. And it is a colorful rain with random colors. You can play with...
For further actions, you may consider blocking this person and/or reporting abuse
Why the "object for nothing" and all the manual assignments. Also "while" is slower than for, and if you leverage loose typecasting a decrement could be more optimal for such a loop. It's also not a great idea to CONST inside a loop since the point of CONST is it can't be re-assigned OR deleted (which is how it knows it's not reassigned). As such you're creating a bunch of instances that aren't removed from memory.
REALLY cute trick? appendChild returns the object appended. and if you use Object.assign on your created element.style, you can greatly reduce the code complexity.
Likewise if you use % for the left offset, it eliminates the bug of it showing single column if the script runs before the render is complete, and means you don't need to read clientWidth.
See this pen I forked off.
codepen.io/jason-knight/pen/vYeZKXG
A lot less code and far simpler too.
Actually that's nice, thanks for tips.
I played with it a bit further for fun, swapping a number of the parameters that were individually randomized to be uniform, since distance of the drop would impact apparent brightness (opacity) and size.
codepen.io/jason-knight/pen/xxXrgyG
Looks good, nice code reduction, good concise syntax ... reminds me of this:
Well done, Sir 👍
thanks a lot , very informative
It's my pleasure :)
Neat! 👍
Nice effect. I don't recommend bumping your count to 1,000,000. My browser did NOT like it.
LoL 😂
Maybe YOU can create a new post with better more optimized example!?
But as you can see we are generating random style for every element so we need to use JS.