TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: Embed a snow effect on your website

129 pointsby ksimonover 2 years ago
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 :)

24 comments

M4v3Rover 2 years ago
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 ;).
评论 #33955613 未加载
评论 #33955528 未加载
评论 #33955376 未加载
评论 #33955395 未加载
henriquezover 2 years ago
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.
评论 #33955215 未加载
评论 #33955277 未加载
joe8756438over 2 years ago
Reminds me of an online party invite [0] I made with a friend back in 2012.<p>We made a bunch of winter&#x2F;holiday related libraries (font, snow fall, randomly generated snow-capped mountain scenery and marquee lights border) all constructed from HTML form elements.<p>The font, based on low-res [1] (with permission), is still available as a library [2]<p>0. <a href="https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20150313003701&#x2F;http:&#x2F;&#x2F;megazinemagazine.com&#x2F;winternet&#x2F;" rel="nofollow">https:&#x2F;&#x2F;web.archive.org&#x2F;web&#x2F;20150313003701&#x2F;http:&#x2F;&#x2F;megazinema...</a><p>1. <a href="https:&#x2F;&#x2F;fonts.adobe.com&#x2F;fonts&#x2F;lo-res" rel="nofollow">https:&#x2F;&#x2F;fonts.adobe.com&#x2F;fonts&#x2F;lo-res</a><p>2. <a href="https:&#x2F;&#x2F;github.com&#x2F;1800joe&#x2F;LoResForm" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;1800joe&#x2F;LoResForm</a>
mgoetzkeover 2 years ago
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
评论 #33960721 未加载
dspillettover 2 years ago
For a friend&#x27;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&#x27;t find one. A quick search finds none currently either (many where it accumulates at the bottom of the page&#x2F;viewport or on&#x2F;in a particular DOM element, but none that have it build up generically on DOM boxes.<p>One of the many items in my huge pile of Things To Bother Doing One Day!
评论 #33957402 未加载
harelover 2 years ago
Somewhere in the end of the 90s, my &quot;personal website&quot; had a snow effect around this time of year. I guess like fashion, website effects have comeback trends...
swayvilover 2 years ago
I remember watching the Commodore 64 Christmas demo with my family on Christmas morning. Chiptune Bach and VGA graphics. It was magic.<p>Later that morning I started learning Basic.
LarryMullinsover 2 years ago
Thank you for reminding me that it&#x27;s time to install xsnow again.
评论 #33963188 未加载
prirunover 2 years ago
Please don&#x27;t use this: it more than doubles CPU usage of Firefox.
评论 #33958228 未加载
评论 #33957409 未加载
graderjsover 2 years ago
Thanks! I added it to <a href="https:&#x2F;&#x2F;dosyago.com" rel="nofollow">https:&#x2F;&#x2F;dosyago.com</a>
评论 #33956131 未加载
neontomoover 2 years ago
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&#x27;s vibe.<p>Just change this line:<p><pre><code> var embCSS = &#x27;.embedim-snow{position: absolute;width: 10px;height: 10px;margin-top:-10px}&#x27;; </code></pre> And this line:<p><pre><code> embHTML += &#x27;&lt;i class=&quot;embedim-snow&quot;&gt;*&lt;&#x2F;i&gt;&#x27;;</code></pre>
评论 #33966413 未加载
insanitybitover 2 years ago
Something about this gives me a strong feeling of ambiguous nostalgia, like maybe gaiaonline had this effect when I was 12 or something.
andaiover 2 years ago
Is there a way to make the movement smoother? Right now they change directions instantly. Perhaps an ease-in&#x2F;out on the x-axis?
评论 #33959033 未加载
kitsunesobaover 2 years ago
Reminds me of back in the late 90s and early 00s when these effects fell under the umbrella of &quot;DHTML&quot; (dynamic HTML) and there were sites dedicated to indexing them and making them easy to browse and even review. Nostalgic.
superpope99over 2 years ago
I asked GPT what the source code does, was pretty impressed with the response<p>&gt;This code is a JavaScript program that creates a &quot;snow&quot; 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.
评论 #33955870 未加载
评论 #33955639 未加载
评论 #33955591 未加载
评论 #33958170 未加载
marbanover 2 years ago
Eternal strike September &#x2F;strike December on HN?
huggover 2 years ago
Nice! I however opted for just downloading the source and referencing it in my project directly, don&#x27;t trust that link.
warinukraineover 2 years ago
The 90s called, they want their internet back.
评论 #33955356 未加载
评论 #33956659 未加载
评论 #33955998 未加载
评论 #33955369 未加载
评论 #33955455 未加载
Tepixover 2 years ago
It&#x27;s nice that it uses CSS transforms to animate the snowflakes! On the other hand the flakes are merely circles...<p>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!<p>Here is the current prettyfied sourcecode:<p><pre><code> &#x2F;* https:&#x2F;&#x2F;embed.im&#x2F;snow *&#x2F; var embedimSnow = document.getElementById(&quot;embedim--snow&quot;); if (!embedimSnow) { function embRand(a, b) { return Math.floor(Math.random() * (b - a + 1)) + a } var embCSS = &#x27;.embedim-snow{position: absolute;width: 10px;height: 10px;background: white;border-radius: 50%;margin-top:-10px}&#x27;; var embHTML = &#x27;&#x27;; for (i = 1; i &lt; 200; i++) { embHTML += &#x27;&lt;i class=&quot;embedim-snow&quot;&gt;&lt;&#x2F;i&gt;&#x27;; 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 += &#x27;.embedim-snow:nth-child(&#x27; + i + &#x27;){&#x27; + &#x27;opacity:&#x27; + (embRand(1, 10000) * 0.0001).toFixed(2) + &#x27;;&#x27; + &#x27;transform:translate(&#x27; + rndX.toFixed(2) + &#x27;vw,-10px) scale(&#x27; + rndS + &#x27;);&#x27; + &#x27;animation:fall-&#x27; + i + &#x27; &#x27; + embRand(10, 30) + &#x27;s -&#x27; + embRand(0, 30) + &#x27;s linear infinite&#x27; + &#x27;}&#x27; + &#x27;@keyframes fall-&#x27; + i + &#x27;{&#x27; + rndT + &#x27;%{&#x27; + &#x27;transform:translate(&#x27; + (rndX + rndO).toFixed(2) + &#x27;vw,&#x27; + rndT + &#x27;vh) scale(&#x27; + rndS + &#x27;)&#x27; + &#x27;}&#x27; + &#x27;to{&#x27; + &#x27;transform:translate(&#x27; + (rndX + (rndO &#x2F; 2)).toFixed(2) + &#x27;vw, 105vh) scale(&#x27; + rndS + &#x27;)&#x27; + &#x27;}&#x27; + &#x27;}&#x27; } embedimSnow = document.createElement(&#x27;div&#x27;); embedimSnow.id = &#x27;embedim--snow&#x27;; embedimSnow.innerHTML = &#x27;&lt;style&gt;#embedim--snow{position:fixed;left:0;top:0;bottom:0;width:100vw;height:100vh;overflow:hidden;z-index:9999999;pointer-events:none}&#x27; + embCSS + &#x27;&lt;&#x2F;style&gt;&#x27; + embHTML; document.body.appendChild(embedimSnow) } </code></pre> and here is the prettified CSS string <i>embCSS</i>:<p><pre><code> .embedim - snow: nth - child(&#x27;+i+&#x27;) { &#x27;+&#x27; opacity: &#x27;+(embRand(1,10000)*0.0001).toFixed(2)+&#x27;; &#x27;+&#x27; transform: translate(&#x27;+rndX.toFixed(2)+&#x27; vw, -10 px) scale(&#x27;+rndS+&#x27;); &#x27;+&#x27; animation: fall - &#x27;+i+&#x27; &#x27;+embRand(10,30)+&#x27; s - &#x27;+embRand(0,30)+&#x27; s linear infinite &#x27;+&#x27; } &#x27;+&#x27; @keyframes fall - &#x27;+i+&#x27; { &#x27;+rndT+&#x27; % { &#x27;+&#x27; transform: translate(&#x27;+(rndX+rndO).toFixed(2)+&#x27; vw, &#x27;+rndT+&#x27; vh) scale(&#x27;+rndS+&#x27;) &#x27;+&#x27; } &#x27;+&#x27; to { &#x27;+&#x27; transform: translate(&#x27;+(rndX+(rndO&#x2F;2)).toFixed(2)+&#x27; vw, 105 vh) scale(&#x27;+rndS+&#x27;) &#x27;+&#x27; } &#x27;+&#x27; }</code></pre>
taubekover 2 years ago
Now I&#x27;m looking for snowx for Windows 11 :)
david422over 2 years ago
Adding a border makes the snow a bit more visible on a light website:<p><pre><code> border: 1px solid black;</code></pre>
评论 #33959735 未加载
tasukiover 2 years ago
I like it!<p>&gt; Just one line of code, which will not slow your website down.<p>This is not completely true though :)
sccxyover 2 years ago
Maybe you can add bookmarklet option also?
dreamoffireover 2 years ago
Maybe I&#x27;m missing a button or something, but I&#x27;d expect there to be a snow effects demo on the page you linked
评论 #33956462 未加载