Creando un Efecto de Rastro de Imágenes en tu Sitio Web

ESW

ESWESW

Creando un Efecto de Rastro de Imágenes en tu Sitio Web

				
					
  <body>
    <header class="header">
      <div>
        <h2 class="person__name">ElSaltoWeb
          <span class="person__prof">Frontend Developer</span>
        </h2>
      </div>
        </header> <!-- .header -->
    <main class="content">
      <h3 class="content__title">ESWESW</h3>
      <div class="img-wrapper">
        <img decoding="async" class="img-item" src="https://elsaltoweb.es/wp-content/uploads/2024/02/alvafusion.jpg" >
        <img decoding="async" class="img-item" src="https://elsaltoweb.es/wp-content/uploads/2024/02/tusernatural.jpg" >
        <img decoding="async" class="img-item" src="https://elsaltoweb.es/wp-content/uploads/2024/02/foto-perfil.jpg" >
        <img decoding="async" class="img-item" src="https://elsaltoweb.es/wp-content/uploads/2024/02/beneficios-difusores.jpg" >
        <img decoding="async" class="img-item" src="https://elsaltoweb.es/wp-content/uploads/2024/05/andres-1-scaled.webp" >
        <img decoding="async" class="img-item" src="https://elsaltoweb.es/wp-content/uploads/2024/04/Captura-de-pantalla-2024-04-16-112711.png" >
        <img decoding="async" class="img-item" src="https://res.cloudinary.com/dtmzwq2ua/image/upload/v1567568499/12_iif68c.jpg" >
        <img decoding="async" class="img-item" src="https://elsaltoweb.es/wp-content/uploads/2024/03/Default_a_fotorrealistic_wordpress_central_offices_0.png" >
        <img decoding="async" class="img-item" src="https://elsaltoweb.es/wp-content/uploads/2024/05/limon-scaled.jpeg" >
        <img decoding="async" class="img-item" src="https://elsaltoweb.es/wp-content/uploads/2024/05/paella-scaled.jpeg" >
        <img decoding="async" class="img-item" src="https://elsaltoweb.es/wp-content/uploads/2024/05/sombrillas-scaled.jpeg" >

      </div> <!-- .img-wrapper -->

    </main><!-- .content -->
<script>
    
  const imgWrapper = document.querySelector(".img-wrapper");
const allImages = [...imgWrapper.querySelectorAll("img")];

let imgNum = 0;
// setting threshold to make a gab between images
const threshold = 125;

let lastPosX, lastPosY, curPosX, curPosY;
let isCounting = true;
let startFromX, startFromY;

document.body.addEventListener("mousemove", function(e) {
  const [x, y] = [e.x, e.y];

  const hasCrossedThresHold = // Boolean value wheather the mouse has crossed the theshold or not
    x > startFromX + threshold ||
    x < startFromX - threshold ||
    y > startFromY + threshold ||
    y < startFromY - threshold;

  if (hasCrossedThresHold) {
    // if it has calling showNextImage
    showNextImage(e);
    isCounting = true; // changing the isCounting to true
  }

  if (isCounting) {
    // So that we can record the another point here again !!
    startFromX = x;
    startFromY = y;
  }

  isCounting = false; // Changing the isCounting to false to not let recording the startFromX and
  //startFromY points on every mouse-move
});

function showNextImage(e) {
  const movingImage = allImages[imgNum];
  [curPosX, curPosY] = [e.x, e.y];

  movingImage.removeAttribute = "style";

  // Setting the position of image
  movingImage.style.left = `${curPosX}px`;
  movingImage.style.top = `${curPosY}px`;

  // making the image visibile here
  movingImage.classList.add("visible");

  // calculating a moving distance
  const movingDistanceX = ((curPosX - lastPosX || 0) * 80) / 100;
  const movingDistanceY = ((curPosY - lastPosY || 0) * 80) / 100;

  setTimeout(function() {
    // animating image towards the current position of mouse
    movingImage.style.left = `${lastPosX + movingDistanceX}px`;
    movingImage.style.top = `${lastPosY + movingDistanceY}px`;

    setTimeout(function() {
      movingImage.classList.add("grow-scale"); // hiding image after 800ms

      setTimeout(function() {
        movingImage.classList.remove("visible", "grow-scale");
        movingImage.style = "";
      }, 600);
    }, 800);
  }, 10);

  imgNum++; // incresing num to show different image  each time

  if (imgNum === allImages.length - 1) {
    imgNum = 0;
  }

  // Setting the last position values of image
  lastPosX = curPosX;
  lastPosY = curPosY;
}
</script> 

  </body>

Comprendiendo el Código

Antes de profundizar en el código, echemos un vistazo a cómo funciona este efecto:

Inicialización de Elementos: El HTML contiene un contenedor de imágenes (<div class="img-wrapper">) con una serie de imágenes dentro de él.
Detectando el Movimiento del Ratón: En el script JavaScript, se añade un evento de escucha al cuerpo del documento para detectar los movimientos del ratón.
Generando el Efecto de Rastro: Cuando el ratón se mueve, se verifica si ha cruzado un umbral predefinido. Si es así, se activa la función showNextImage() para mostrar una imagen en la posición del ratón.
Animando la Imagen: La función showNextImage() mueve la imagen hacia la posición actual del ratón con una pequeña animación. Luego, oculta la imagen y la restablece después de un breve período de tiempo.

Añade el CSS personalizado a tu widget

				
					/********************************************
ImageTrailEffects/ 
********************************************/

body {
  font-family: quiroh, sans-serif;
  font-size: 16px;

  /****** variables  *****/
  --color-pink: #d02d55;
  --color-title: #232323;
}

/***********  Default/reset  ***********/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/***********  Link  ***********/


.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  z-index: 9;
  padding: 70px 30px;
  justify-content: space-between;
}

.person__name {
  color: #fff;
}

.person__prof {
  font-size: 18px;
  display: block;
  display: flex;
  align-items: center;
  font-weight: 300;
}

.person__prof:before {
  content: "";
  width: 15px;
  height: 1px;
  background: #fff;
  margin-right: 3px;
}



.person__test {
  display: block;
}

.img-wrapper {
  height: 118vh;
  background: #151413;
  position: relative;
  overflow: hidden;
}

.drag__box {
  height: 180px;
  width: 140px;
  position: absolute;
  transition: 0.1s all;
}

.visible {
  opacity: 1;
  visibility: visible;
}

.hidden {
  display: none;
}

img {
  object-fit: cover;
  width: 300px;
  visibility: hidden;
  transition: 0.6s ease-out all;
  position: absolute;
  max-width: 28px;
  transform: translateY(-50%);
  transform-origin: bottom;
}

.grow-scale {
  transform: scale(2);
  visibility: hidden;
  opacity: 0;
  transition: 0.5s all ease-in-out;
}

.content {
  position: relative;
  overflow: hidden;
  height: 118vh;
}
.content__title {
  font-family: forma-djr-display, sans-serif;
  font-size: 27vw;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-title);
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 60%;
  z-index: 99;
  transform: translateY(-50%);
  pointer-events: none;
}

Con solo un poco de HTML CSS y JavaScript, puedes agregar un fascinante efecto de rastro de imágenes a tu sitio web. ¡Experimenta con diferentes imágenes y ajusta los parámetros para lograr el efecto deseado!

Este efecto seguramente impresionará a tus visitantes y agregará un toque de interactividad a tu sitio web.

¡Diviértete creando y explorando! 🚀

COMPARTIR EN:

Customiza tus widgets de Elementor de manera fácil

📢 ¡Nuevos Recursos para Personalizar tus Widgets de Elementor! 🎉

COMPARTIR EN:

222

ThreeJS + Vanta.Fog: Animated Background

Three.js es una biblioteca de JavaScript que permite crear gráficos 3D en el navegador de manera eficiente, usando WebGL.

COMPARTIR EN:

113

Tensorflow videotracking V2

🧠TensorFlow.js, es como un cerebro de computadora que detecta objetos a tu alrededor 🕵️‍♂️.

COMPARTIR EN:

269

Proyecto de Conversión de Texto a Voz (TTS) – Gratuito

Este proyecto ha sido creado como una herramienta accesible para cualquier persona que desee convertir texto en voz sin necesidad de utilizar servicios de pago. Lo ofrezco de manera gratuita como una forma de contribuir al acceso de tecnologías avanzadas para todos.

COMPARTIR EN:

113

Headless CMS

¿Qué es un Headless CMS?

COMPARTIR EN:

Animación de Desplazamiento con Efecto de Pantalla Dividida para Portafolio

Encontrarás el código HTML completo para que puedas integrarlo fácilmente utilizando un widget de HTML en WordPress y Elementor.

ElSaltoWeb.es Frontend Developers

ESWESW

Creando un Efecto de Rastro de Imágenes en tu Sitio Web

Comprendiendo el Código

Añade el CSS personalizado a tu widget

Customiza tus widgets de Elementor de manera fácil

ThreeJS + Vanta.Fog: Animated Background

Tensorflow videotracking V2

Proyecto de Conversión de Texto a Voz (TTS) – Gratuito

Headless CMS

Animación de Desplazamiento con Efecto de Pantalla Dividida para Portafolio

CONTACTO

mis redes sociales

Para tu ayuda

Elsaltoweb.es