setInterval Mousemove轨迹

Question

在我的代码中，我想创建一个鼠标轨迹，其中包含1)随机图像，2)模糊效果，3)不透明度转换，4)最大数量的div。

类似于此：https://tympanus.net/Development/ImageTrailEffects/

第2点和第3点已经完成，但是我被困在了第4点。这条路现在有一个疯狂的闪光灯效应，我不喜欢它。我希望它不那么敏感，更微妙。对他们有某种限制。我增加了一个计数器，在这里我可以计算出所创建的div数量，但是我不知道现在该做什么。我看过setInterval，但是当我将它应用到我的函数中时，它不起作用了

在为随机背景创建数组时，我也遇到了一些问题，但我相信我会找到答案的。问题主要是如何限制和控制小径的创建，但如果有人对如何创建随机背景图像有提示/链接，我将全神贯注。

这是我到现在为止的代码

window.onload= function() {
window.addEventListener('mousemove', function(e) {

    var animate= function(i) {
        var image= document.createElement('div'); //create a div named bubble
  image.classList.add('trail');
        var size= 60;
        var sizepx= size+'px';
  image.style.transition='2s ease';
        image.style.position= 'fixed';
  
        image.style.top=  e.pageY - size/2 + 'px';
        image.style.left= e.pageX - size/2 + 'px';
        
  image.style.width= sizepx;
        image.style.height= sizepx;
        
 
 
        image.style.background= 'hsla(' +
        Math.round(Math.random()*360) + ', ' +
        '100%, ' +
        '50%';
          
  // image.style.background= 'black';
  image.style.border= 'white 1px solid';
  
  image.style.pointerEvents= 'none';
        image.style.zIndex= 1;
        document.body.appendChild(image);
  
  //opacity and blur animations
    window.setTimeout(function() {
            image.style.opacity = 0;
    image.style.filter = 'blur(6px)';
        }, 80);   

        window.setTimeout(function() {
            document.body.removeChild(image);
        }, 2100);
 }; 

var numItems = document.querySelectorAll('.trail').length;

console.log(numItems);

    for (var i= 1; i <= 1; i+= 1) {
        animate(i);
    }
});
};

小提琴：https://jsfiddle.net/opufnsvz/

Answer 1

在这里，你去伴侣(我使用Unsplash作为随机图像源)，在飞行加载图像会产生不想要的效果，所以它们必须被预先加载。您可以更改timesPerSecond以控制频率。

​

const numberOfImages = 10;
const imageSources = Array.from(Array(numberOfImages).keys()).map((i) => 'https://source.unsplash.com/collection/9948714?' + i);
// how many times to fire the event per second
const timesPerSecond = .1;

function preloadImages(images) {
  for (i = 0; i < images.length; i++) {
    let l = document.createElement('link')
    l.rel = 'preload'
    l.as = 'image'
    l.href = images[i]
    document.head.appendChild(l);
  }
}

function animate(e) {
  var image= document.createElement('div'); //create a div named bubble
  image.classList.add('trail');
  var size= 60;
  var sizepx= size+'px';
  image.style.transition='2s ease';
  image.style.position= 'fixed';

  image.style.top=  e.pageY - size/2 + 'px';
  image.style.left= e.pageX - size/2 + 'px';

  image.style.width= sizepx;
  image.style.height= sizepx;
    
  image.style.backgroundImage = 'url(https://source.unsplash.com/collection/9948714?'+  Math.floor(Math.random()*numberOfImages) +')';
  image.style.backgroundSize = 'cover';
  image.style.border= 'white 1px solid';

  image.style.pointerEvents= 'none';
  image.style.zIndex= 1;
  document.body.appendChild(image);

  //opacity and blur animations
  window.setTimeout(function() {
    image.style.opacity = 0;
    image.style.filter = 'blur(6px)';
  }, 80);   

  window.setTimeout(function() {
    document.body.removeChild(image);
  }, 2100);
};

window.onload= function() {
preloadImages(imageSources);
var wait = false;

  window.addEventListener('mousemove', function(e) {
    if (!wait) {
      wait = true;
      setTimeout(() => { wait = false }, timesPerSecond * 1000);
      animate(e);
    }
  });
};

​