[HN Gopher] Show HN: Embed a snow effect on your website
___________________________________________________________________
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 :)
Author : ksimon
Score : 109 points
Date : 2022-12-12 14:27 UTC (8 hours ago)
(HTM) web link (embed.im)
(TXT) w3m dump (embed.im)
| warinukraine wrote:
| The 90s called, they want their internet back.
| jagermo wrote:
| That's good, because I miss a few things from back then. Like
| "Site under construction" gifs!
| seritools wrote:
| http://www.textfiles.com/underconstruction/ for all your
| construction needs!
| em-bee wrote:
| 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.
| ksimon wrote:
| So there's another weekend project idea :)
| crazygringo wrote:
| OMG.
|
| Is there a word that combines a tidal wave of nostalgia
| with the feeling that you're going to have a seizure? :)
| jjgreen wrote:
| Naustalgia?
| worldofmatthew wrote:
| Is that a bad thing? We can learn a lot from the 90's internet.
| warinukraine wrote:
| Like what?
| pupppet wrote:
| I'll take 90s internet over what we have now any day, which is
| basically a collection of tv stations.
| BaudouinVH wrote:
| I'd say 1997/98.
| dspillett wrote:
| 1997 and 1998 _were_ in the 90s, so the previous post isn't
| inaccurate...
| mckravchyk wrote:
| The 10s called, they want their desktop back.
|
| (Compiz)
| graderjs wrote:
| Thanks! I added it to https://dosyago.com
| ksimon wrote:
| Looks perfect :)
| joe8756438 wrote:
| 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]
|
| 0.
| https://web.archive.org/web/20150313003701/http://megazinema...
|
| 1. https://fonts.adobe.com/fonts/lo-res
|
| 2. https://github.com/1800joe/LoResForm
| insanitybit wrote:
| Something about this gives me a strong feeling of ambiguous
| nostalgia, like maybe gaiaonline had this effect when I was 12 or
| something.
| hugg wrote:
| Nice! I however opted for just downloading the source and
| referencing it in my project directly, don't trust that link.
| tasuki wrote:
| I like it!
|
| > Just one line of code, which will not slow your website down.
|
| This is not completely true though :)
| LarryMullins wrote:
| Thank you for reminding me that it's time to install xsnow again.
| aaron695 wrote:
| andai wrote:
| Is there a way to make the movement smoother? Right now they
| change directions instantly. Perhaps an ease-in/out on the
| x-axis?
| ksimon wrote:
| Great idea :)
| harel wrote:
| 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...
| neontomo wrote:
| 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}';
|
| And this line: embHTML += '<i class="embedim-
| snow">*</i>';
| henriquez wrote:
| 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.
| Kiala wrote:
| <script src="https://app.embed.im/snow.js" inte
| grity="sha384-Valx9sYaUe2U0FqU3e/VYEIMy5hvYI21K429rkwaao8xgzmD6
| in2EIws7JBQtlnl" crossorigin="anonymous"
| defer></script>
| Retr0id wrote:
| 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)
| mort96 wrote:
| 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.
|
| But yeah, the URL should really be versioned.
| [deleted]
| [deleted]
| dspillett wrote:
| 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!
| thombat wrote:
| 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.
| kitsunesoba wrote:
| 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.
| dreamoffire wrote:
| Maybe I'm missing a button or something, but I'd expect there to
| be a snow effects demo on the page you linked
| bearmode wrote:
| Do you have JS disabled? The linked page has the snow effect on
| it
| M4v3R wrote:
| 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 ;).
| madjam002 wrote:
| Yikes, who remembers these
| https://codepen.io/maheshambure21/pen/ZGevNP :)
| charles_f wrote:
| Wow, this is what is missing on my blog.
| [deleted]
| [deleted]
| ksimon wrote:
| Haha, 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 :)
| ranting-moth wrote:
| Also consider making a replacement for the marquee element
| for a true nostalgic experience. Or does it still work in
| modern browsers?
| M4v3R wrote:
| It 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/ma...
| ranting-moth wrote:
| Wow, I never even knew you could scroll upwards or both
| ways!
|
| Works on Firefox too. I tried adding <blink> but
| (thankfully) that didn't work.
|
| Blinking Marquees were a big thing.
| andai wrote:
| Nice. I'll have to take a page out of your book: my homepage
| currently uses JS to animate underwater bubbles and uses 100%
| CPU.
|
| Strange coincidence, I was thinking about fixing that
| today...
| M4v3R wrote:
| Yeah 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 wrote:
| Tables? pft. Frames. Frames were the business.
| mgoetzke wrote:
| I 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 wrote:
| I made this quite a few years ago although it's all canvas so
| doesn't interact with the page
| https://www.horsedrawngames.com/nye/
| superpope99 wrote:
| 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.
| M4v3R wrote:
| Okay, 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).
| Kiro wrote:
| Why is this downvoted? Is GPT the new thing to unconditionally
| hate now?
| josephcsible wrote:
| Because if you care what GPT says about something, you can
| ask it yourself.
| mym1990 wrote:
| But in a more abstract code example where you don't have
| good context for what is happening, this similar behavior
| could be very helpful.
| M4v3R wrote:
| Actually I couldn't because the site was overloaded. Plus
| it never came to mind my to check, so I appreciate the GP
| post for mentioning this.
| RjQoLCOSwiIKfpm wrote:
| What 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?
| nurettin wrote:
| 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.
| prirun wrote:
| Please don't use this: it more than doubles CPU usage of Firefox.
| nozzlegear wrote:
| 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.
|
| https://www.dropbox.com/s/d3fec6znlleulgt/2022-12-12T11-28-4...
| waboremo wrote:
| Sounds like you have hardware acceleration turned off on
| firefox.
| david422 wrote:
| Adding a border makes the snow a bit more visible on a light
| website: border: 1px solid black;
| sodality2 wrote:
| > 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.
| Tepix wrote:
| 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!
|
| 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;wid
| th: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+') '+' } '+' }
| [deleted]
| swayvil wrote:
| I 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.
| sccxy wrote:
| Maybe you can add bookmarklet option also?
| marban wrote:
| Eternal strike September /strike December on HN?
___________________________________________________________________
(page generated 2022-12-12 23:01 UTC)