Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Embed a snow effect on your website

embed.im

Post reply on HN
Print view View original

1–10 of 83 posts

Re: Show HN: Embed a snow effect on your website

#7

Post by Tepix »

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 ';
          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 = '#embedim--snow{position:fixed;left:0;top:0;bottom:0;width:100vw;height:100vh;overflow:hidden;z-index:9999999;pointer-events:none}' + embCSS + '' + 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+')
        '+'
    }
    '+'
 }

Re: Show HN: Embed a snow effect on your website

#10

Post by Retr0id »

Kiala wrote: post #4
henriquez wrote: post #2

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.

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)
Post reply on HN