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 :) |
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 :) |
PS. The JS is used just to generate and embed the code, snow effect is 100% CSS :)
Strange coincidence, I was thinking about fixing that today...
<script
src="https://app.embed.im/snow.js"
integrity="sha384-Valx9sYaUe2U0FqU3e/VYEIMy5hvYI21K429rkwaao8xgzmD6in2EIws7JBQtlnl"
crossorigin="anonymous"
defer></script>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...
One of the many items in my huge pile of Things To Bother Doing One Day!
Later that morning I started learning Basic.
2022, 3.5GHz 6-core Intel Core i5: Nooo! This causes Firefox to use 50% of the CPU!
https://www.dropbox.com/s/d3fec6znlleulgt/2022-12-12T11-28-4...
Just change this line:
var embCSS = '.embedim-snow{position: absolute;width: 10px;height: 10px;margin-top:-10px}';
embHTML += '<i class="embedim-snow">*</i>';>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?
(Compiz)
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)
}
.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+')
'+'
}
'+'
} border: 1px solid black;Personally, I edited it to be
background: lightblue
> Just one line of code, which will not slow your website down.
This is not completely true though :)
But yeah, the URL should really be versioned.
(I cannot sign up to ChatGPT myself because it requires a cell phone number and I won't hand that out to any websites.)
You probably mean more _precise_.
Is there a word that combines a tidal wave of nostalgia with the feeling that you're going to have a seizure? :)
Works on Firefox too. I tried adding <blink> but (thankfully) that didn't work.
Blinking Marquees were a big thing.
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.