Ahh, adding snow effects to your websites with JS, the reason Javascript was actually invented in the first place, along with showing current time alongside your cursor ;).
Blink was removed a long time ago, but you can emulate it easily with CSS animations.
To make it even more irritatingly attention grabbing while trying to read something else, layer the blink (or fade if being slightly more subtle) so it occasionally blinks brighter. Use the "Cicada Principle" to make the blink unpredictable with minimal effort.
It’s a cool effect but would be better to go front-and-center with the source code. Asking people to embed random third party scripts on their web pages is a security bottomless pit.
The URL is not versioned, so it will break whenever OP makes an update (which is arguably a good thing, but we really need OP to provide us with a versioned URL)
Luckily, your snow effect is not mission-critical. So even without the versioned URL, I'd probably take the trade-offs; the snow effect might disappear, but at least I don't give some random person arbitrary remote code execution permissions on my website.
Reminds me of an online party invite [0] I made with a friend back in 2012.
We made a bunch of winter/holiday related libraries (font, snow fall, randomly generated snow-capped mountain scenery and marquee lights border) all constructed from HTML form elements.
The font, based on low-res [1] (with permission), is still available as a library [2]
For a friend's page a while ago we wanted one where the snow would accumulate on DOM elements (anything with a top border, or some such heuristic) but couldn't find one. A quick search finds none currently either (many where it accumulates at the bottom of the page/viewport or on/in a particular DOM element, but none that have it build up generically on DOM boxes.
One of the many items in my huge pile of Things To Bother Doing One Day!
Don't stop there! It will need tiny householders to shovel the snow off when the accumulation is too deep, and for a stretch goal the cascading snow can induce avalanches. With enough feature creep you'll be able to declare version 1.0 complete the same day you hear the first cuckoo of spring.
I wasn't planning quite that much, though I did consider some rules to try make the stuff pile with a little more realism than simple pixel stacking. And if elements vanished, having the accumulation on them re-fall instead of just disappearing (including partially if things shrunk) though that would need a modified model as settled snow would compact and have a higher terminal velocity…
But for true feature creep you need to discard this "planning" (just tell yourself you're deftly avoiding a waterfall approach), and just focus on adding that "one last feature and then I'm done". And then iterate ad infinitum - for example what scale is the height, and for this are you considering just the viewport or the entire page? will you need an atmospheric model to account for lower density at altitude? if it is just the viewport then will scrolling have a consequence, like a sudden wind flurry? will marquee text induce laminar or turbulent flow?
Somewhere in the end of the 90s, my "personal website" had a snow effect around this time of year. I guess like fashion, website effects have comeback trends...
Does it? It doesn't seem to affect mine at all. Edit: when the tab is focused it looks like it uses just under 4% of CPU in Firefox, and none when it's not focused. I don't know if that means 4% of total machine CPU or 4% of CPU that Firefox is using.
On my Macbook Pro running Mohave, Firefox uses 14% CPU for about 50 tabs. When this snow globe thing is running, it uses 36% according to top. These are minimums; it periodically spikes higher.
I really like it, reminds me of old school internet. I prefer it with ASCII though, try it with an asterix (*) instead of a white orb for that 90's vibe.
Just change this line:
var embCSS = '.embedim-snow{position: absolute;width: 10px;height: 10px;margin-top:-10px}';
Reminds me of back in the late 90s and early 00s when these effects fell under the umbrella of "DHTML" (dynamic HTML) and there were sites dedicated to indexing them and making them easy to browse and even review. Nostalgic.
I asked GPT what the source code does, was pretty impressed with the response
>This code is a JavaScript program that creates a "snow" animation on a web page. When executed, the code generates a number of white, circular elements (which represent snowflakes) and animates them to move across the page, creating the illusion of snow falling. The snowflakes are given random positions, sizes, and animations to make the effect more realistic.
Just the raw source code, or other parts of the website?
Which text did you use to ask it for a description?
Can you try progressively removing parts of the source code to see what the minimal version is which makes GPT say that the code renders a snow effect?
If you want to try things out it's free to use for now https://chat.openai.com/chat. Just pasting the raw source with no prompt is enough to get that description.
It is not entirely accurate (thankfully) the animations are done by CSS which is generated by JavaScript. But the way it understands context is pretty impressive.
on my website i used to have the opposite: a prominent line at the top stating that "this page is not under construction" along with one of those (not animated) workers with a shovel signs crossed out.
It's nice that it uses CSS transforms to animate the snowflakes! On the other hand the flakes are merely circles...
If you want to exclude external javascript in your site remember to use subresource integrity as shown by Kiala. The included Javascript can change at any moment!
