Blurred & transparent circle background effect on mouse move

Question

I am trying to replicate this effect: http://atopos.gr/not-a-toy/ (try moving around the mouse), but I have no clue how they achieved it?

I have tried to play around with a JSfiddle here: http://jsfiddle.net/1tz5b6r0/, but it does not work.

The function:

 function animate() {
   requestAnimationFrame(animate);

   update();
 }

Runs requestAnimationFrame but that does not seem to occur anywhere in their code.

I can't figure out what they did to create this effect

What am I missing?

Answer 1

Nice effect, I gave it a try: http://jsfiddle.net/wLa4cLay/

• with every mouse movement a blurry circle is created at the mouse position
• random color, random size
• cirlce shrinks and fades out immediatly

• blur effect is a box shadow

  /* create an animated circle with every mouse movement */ $('body').on('mousemove', function(ev) { createRandomCircle(ev.pageX, ev.pageY); });

  function createRandomCircle(x, y) {

  /* shadow has 100px top offset, so compensate with -100px top */
  y = y -100;
  
  /* random color */
  var colorR = Math.ceil(Math.random() * 255);
  var colorG = Math.ceil(Math.random() * 255);
  var colorB = Math.ceil(Math.random() * 255);
  var color = 'rgb('+colorR+','+colorG+','+colorB+')';
  
  /* random size */
  var size = Math.ceil(Math.random() * 80);
  
  /* create the circle */
  var circle = $('<span />')
      .addClass('circle')
      .css('left', x+"px")
      .css('top', y+"px")
      .css('width', size+"px")
      .css('height', size+"px")    
      .css('color', color)
      .css('box-shadow', '0px 100px 40px')
      .css('border-radius', '80px');
  
  circle.appendTo('body');
  
  /* animate the circle (shrink and fade out)  */  
  circle.animate({opacity: 0, width: '10px', height: '10px'}, 500, function() {
      /* remove it when animation is finished */
      $(this).remove();
  });
  

  }

styles:

html, body {
    height: 100%;
}

.circle {
  display: block;
  position:absolute;
  background-color: transparent;
}