setInterval Mousemove trail

Question

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/

i tried to limit the number of divs [here](https://jsfiddle.net/gxce380o/) to 20. Do you mean setInterval() or setTimeout()? — Halim Saad-Rached, Feb 24 '22 at 15:26

score 2 · Accepted Answer · answered Feb 24 '22 at 15:07

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

Oh my god. You are my hero! It's perfect. I am however trying to figure it out a little. The problem I had with the crazy strobe effect is solved by adding a Timeout? And you made sure the images that are appearing are all loaded by adding a preload? Or am I getting it wrong? I'm trying to understand, I've been fooling around with counters and whatnot trying to solve my problem. — L Leah, Feb 24 '22 at 15:27
And what would I need to do If i have image sources in a file, just make an array out of those and use math.floor and math.random to navigate through that array? — L Leah, Feb 24 '22 at 15:39
Yes exactly, if you have them in a file, just point to those files — Meddah Abdallah, Feb 24 '22 at 17:08
Yes, timeout solves the crazy strobe effect by preventing animate to run many times thus preventing the creation of many images and waiting for them to fade before to create — Meddah Abdallah, Feb 24 '22 at 17:10

setInterval Mousemove trail

1 Answers1