In my code, I wanted to create a mouse trail with 1)random images 2)a blurring effect 3) opacity transition 4) a max amount of divs in the trail.

Similar to this: https://tympanus.net/Development/ImageTrailEffects/

Point 2 and 3 are done, however I am stuck on point 4. The trail has a crazy strobe effect right now, which I dislike. I want it to be less sensitive and more subtle. Some kind of limitation on them. I've added a counter where I can count the amounts of divs created, but I'm unsure and stuck as to what to do now. I've looked at setInterval, but when I apply it to my function it's not working

I've also had some issues with the creation of an array for the random backgrounds, but I'm sure I'll figure that out. The question is mostly about how to limit and control the creation of the trail, but if anyone has a tip/link as to how to create the random background images, I am all ears.

Here the code I have up till now

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

A fiddle: https://jsfiddle.net/opufnsvz/

CodePudding user response：

Here you go mate ( I used Unsplash for the random image source ), loading images on the fly gives unwanted effects, so they have to be preloaded. you can change the timesPerSecondto control the frequency

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