9 ms·
Show HN: Embed a snow effect on your website
Embed a snow effect on your website with one line of code (~1.3kB), and add some Christmas magic to your websites. A quick weekend project :)
- mgoetzke 4y agoI would love to see a proper snow effect like in old demos or windows screen overlays where the snow piled up on UI elements
- bananaboy 4y agoI made this quite a few years ago although it’s all canvas so doesn’t interact with the page https://www.horsedrawngames.com/nye/ https://www.horsedrawngames.com/nye/
- henriquez 4y agoIt’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.
- Kiala 4y ago<script src="https://app.embed.im/snow.js" integrity="sha384-Valx9sYaUe2U0FqU3e/VYEIMy5hvYI21K429rkwaao8xgzmD6in2EIws7JBQtlnl" crossorigin="anonymous" defer></script>
- Retr0id 4y agoThe 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)
- mort96 4y agoLuckily, 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. But yeah, the URL should really be versioned.
- deleted 4y ago[deleted]
- deleted 4y ago[deleted]
- M4v3R 4y agoAhh, 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 ;).
- deleted 4y ago[deleted]
- deleted 4y ago[deleted]
- ksimon 4y agoHaha, thanks for another idea, cursor showing current time is what we all miss on our websites today :) PS. The JS is used just to generate and embed the code, snow effect is 100% CSS :)
- M4v3R 4y agoYeah nowadays CSS is pretty powerful, back in the day the CSS couldn't even handle your website layout, had to use tables for that ;)
- mk_stjames 4y agoTables? pft. Frames. Frames were the business.
- ranting-moth 4y agoAlso consider making a replacement for the marquee element for a true nostalgic experience. Or does it still work in modern browsers?
- M4v3R 4y agoIt has been removed from web standards, but at least today it still works both in Chrome and Safari, I just tested. See for yourself: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee#examples https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...
- Tepix 4y agoIt'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! Here is the current prettyfied sourcecode: /* https://embed.im/snow */ var embedimSnow = document.getElementById("embedim--snow"); if (!embedimSnow) { function embRand(a, b) { return Math.floor(Math.random() * (b - a + 1)) + a } var embCSS = '.embedim-snow{position: absolute;width: 10px;height: 10px;background: white;border-radius: 50%;margin-top:-10px}'; var embHTML = ''; for (i = 1; i < 200; i++) { embHTML += '<i class="embedim-snow"></i>'; var rndX = (embRand(0, 1000000) * 0.0001), rndO = embRand(-100000, 100000) * 0.0001, rndT = (embRand(3, 8) * 10).toFixed(2), rndS = (embRand(0, 10000) * 0.0001).toFixed(2); embCSS += '.embedim-snow:nth-child(' + i + '){' + 'opacity:' + (embRand(1, 10000) * 0.0001).toFixed(2) + ';' + 'transform:translate(' + rndX.toFixed(2) + 'vw,-10px) scale(' + rndS + ');' + 'animation:fall-' + i + ' ' + embRand(10, 30) + 's -' + embRand(0, 30) + 's linear infinite' + '}' + '@keyframes fall-' + i + '{' + rndT + '%{' + 'transform:translate(' + (rndX + rndO).toFixed(2) + 'vw,' + rndT + 'vh) scale(' + rndS + ')' + '}' + 'to{' + 'transform:translate(' + (rndX + (rndO / 2)).toFixed(2) + 'vw, 105vh) scale(' + rndS + ')' + '}' + '}' } embedimSnow = document.createElement('div'); embedimSnow.id = 'embedim--snow'; embedimSnow.innerHTML = '<style>#embedim--snow{position:fixed;left:0;top:0;bottom:0;width:100vw;height:100vh;overflow:hidden;z-index:9999999;pointer-events:none}' + embCSS + '</style>' + embHTML; document.body.appendChild(embedimSnow) } and here is the prettified CSS string embCSS: .embedim - snow: nth - child('+i+') { '+' opacity: '+(embRand(1,10000)*0.0001).toFixed(2)+'; '+' transform: translate('+rndX.toFixed(2)+' vw, -10 px) scale('+rndS+'); '+' animation: fall - '+i+' '+embRand(10,30)+' s - '+embRand(0,30)+' s linear infinite '+' } '+' @keyframes fall - '+i+' { '+rndT+' % { '+' transform: translate('+(rndX+rndO).toFixed(2)+' vw, '+rndT+' vh) scale('+rndS+') '+' } '+' to { '+' transform: translate('+(rndX+(rndO/2)).toFixed(2)+' vw, 105 vh) scale('+rndS+') '+' } '+' }
- warinukraine 4y agoThe 90s called, they want their internet back.
- jagermo 4y agoThat's good, because I miss a few things from back then. Like "Site under construction" gifs!
- seritools 4y agohttp://www.textfiles.com/underconstruction/ http://www.textfiles.com/underconstruction/ for all your construction needs!
- ksimon 4y agoSo there's another weekend project idea :)
- crazygringo 4y agoOMG. Is there a word that combines a tidal wave of nostalgia with the feeling that you're going to have a seizure? :)
- jjgreen 4y agoNaustalgia?
- em-bee 4y agoon 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.
- worldofmatthew 4y agoIs that a bad thing? We can learn a lot from the 90's internet.
- superpope99 4y agoI 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.
- M4v3R 4y agoOkay, this is seriously cool, it's a better summary of the code than I could give just by reading it (and the code being minified doesn't help here).
- nurettin 4y agoIt 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.
- RjQoLCOSwiIKfpm 4y agoWhat precisely did you enter into GPT? 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?
- zamadatix 4y agoIf you want to try things out it's free to use for now https://chat.openai.com/chat https://chat.openai.com/chat. Just pasting the raw source with no prompt is enough to get that description.
- RjQoLCOSwiIKfpm 4y agoThanks for the clarification. Really interesting that just the code is enough! (I cannot sign up to ChatGPT myself because it requires a cell phone number and I won't hand that out to any websites.)
- swayvil 4y agoI remember watching the Commodore 64 Christmas demo with my family on Christmas morning. Chiptune Bach and VGA graphics. It was magic. Later that morning I started learning Basic.
- dspillett 4y agoFor 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!
- thombat 4y agoDon'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.
- dspillett 4y agoI 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…
- thombat 4y agoBut 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?
- harel 4y agoSomewhere 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...
- dreamoffire 4y agoMaybe I'm missing a button or something, but I'd expect there to be a snow effects demo on the page you linked
- bearmode 4y agoDo you have JS disabled? The linked page has the snow effect on it
- dreamoffire 4y agoWorking now, I didn't change anything ¯\_(ツ)_/¯
- prirun 4y agoPlease don't use this: it more than doubles CPU usage of Firefox.
- nozzlegear 4y agoDoes 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. https://www.dropbox.com/s/d3fec6znlleulgt/2022-12-12T11-28-45-06-00.png https://www.dropbox.com/s/d3fec6znlleulgt/2022-12-12T11-28-4...
- prirun 4y agoOn 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.
- waboremo 4y agoSounds like you have hardware acceleration turned off on firefox.
- prirun 4y agoPossible, but I don't know how to do that and just now tried to find a place to turn it back on and don't see anything under Preferences.
- deleted 4y ago[deleted]
- sccxy 4y agoMaybe you can add bookmarklet option also?
- marban 4y agoEternal strike September /strike December on HN?
- graderjs 4y agoThanks! I added it to https://dosyago.com https://dosyago.com
- ksimon 4y agoLooks perfect :)
- david422 4y agoAdding a border makes the snow a bit more visible on a light website: border: 1px solid black;
- sodality2 4y ago> border: 1px solid black; Personally, I edited it to be background: lightblue on my site (trilium.cc) - IMO this is better than the border while still looking natural.
- hugg 4y agoNice! I however opted for just downloading the source and referencing it in my project directly, don't trust that link.
- joe8756438 4y agoReminds 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] 0. https://web.archive.org/web/20150313003701/http://megazinemagazine.com/winternet/ https://web.archive.org/web/20150313003701/http://megazinema... 1. https://fonts.adobe.com/fonts/lo-res https://fonts.adobe.com/fonts/lo-res 2. https://github.com/1800joe/LoResForm https://github.com/1800joe/LoResForm
- aaron695 4y ago
- insanitybit 4y agoSomething about this gives me a strong feeling of ambiguous nostalgia, like maybe gaiaonline had this effect when I was 12 or something.
- LarryMullins 4y agoThank you for reminding me that it's time to install xsnow again.
- cbm-vic-20 4y ago1993, 16.67MHz MIPS R2000 DECStation: Time to run xsnow while I've got these other windows open! 2022, 3.5GHz 6-core Intel Core i5: Nooo! This causes Firefox to use 50% of the CPU!
- andai 4y agoIs there a way to make the movement smoother? Right now they change directions instantly. Perhaps an ease-in/out on the x-axis?
- ksimon 4y agoGreat idea :)
- tasuki 4y agoI like it! > Just one line of code, which will not slow your website down. This is not completely true though :)
- neontomo 4y agoI 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}'; And this line: embHTML += '<i class="embedim-snow">*</i>';
- kseistrup 4y agoFor even more snowflake-like appearance, use unicode chararacters SNOWFLAKE + VARIATION SELECTOR-16 (or just SNOWFLAKE alone).
- kitsunesoba 4y agoReminds 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.
- taubek 4y agoNow I'm looking for snowx for Windows 11 :)