|
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;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+')
'+'
}
'+'
}
|