1

在我的代码中，我想创建一个鼠标轨迹，其中包含 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/

4

1 回答 1

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

于 2022-02-24T15:07:45.443 回答