Question

我试图复制这个效果：http://atopos.gr/not-a-toy/（尝试移动鼠标），但我不知道他们是如何实现的？

我试图在这里玩一个JSfiddle：http://jsfiddle.net/1tz5b6r0/，但它不起作用。

功能：

 function animate() {
   requestAnimationFrame(animate);

   update();
 }

运行requestAnimationFrame，但这似乎不会出现在他们的代码中。

我无法弄清楚他们为创造这种效果所做的工作

我错过了什么？

Answer 1

效果很好，我试一试： http://jsfiddle.net/wLa4cLay/

每次鼠标移动时，鼠标位置都会创建模糊圆圈
随机颜色，随机大小
cirlce立即缩小并淡出

模糊效果是一个框阴影

/ *每次鼠标移动都会创建一个动画圆圈* / $（'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();
});

}

样式：

html, body {
    height: 100%;
}

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

模糊和透明圆圈背景对鼠标移动的影响

1 个答案: