En mi código, quería crear un rastro de mouse con 1) imágenes aleatorias 2) un efecto de desenfoque 3) transición de opacidad 4) una cantidad máxima de divs en el rastro.
Similar a esto: https://tympanus.net/Development/ImageTrailEffects/
Los puntos 2 y 3 están listos, sin embargo, estoy atascado en el punto 4. El rastro tiene un efecto estroboscópico loco en este momento, lo que no me gusta. Quiero que sea menos sensible y más sutil. Algún tipo de limitación sobre ellos. Agregué un contador donde puedo contar la cantidad de divs creados, pero no estoy seguro y no sé qué hacer ahora. He mirado setInterval, pero cuando lo aplico a mi función no funciona
También tuve algunos problemas con la creación de una matriz para los fondos aleatorios, pero estoy seguro de que lo resolveré. La pregunta es principalmente sobre cómo limitar y controlar la creación del rastro, pero si alguien tiene un consejo/enlace sobre cómo crear las imágenes de fondo aleatorias, soy todo oídos.
Aquí el código que tengo hasta ahora
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); } }); };Un violín: https://jsfiddle.net/opufnsvz/
Aquí tienes amigo (utilicé Unsplash para la fuente de imagen aleatoria), cargar imágenes sobre la marcha produce efectos no deseados, por lo que deben cargarse previamente. puede cambiar los timesPerSecond por segundo para controlar la frecuencia
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); } }); };