Usted aterriza en un sitio, desplaza la página y el logo en la esquina gira suavemente, reaccionando a cada movimiento de la rueda del ratón. Se ve dinámico, tecnológico y añade ese toque especial que la gente nota.

Crear esta rotación es más sencillo de lo que parece. No necesita librerías pesadas ni megabytes de frameworks de animación. Solo necesita un div, unas pocas líneas de CSS y, literalmente, un bloque de JavaScript.

A continuación, un desglose paso a paso: desde la preparación de la imagen hasta la adaptación a pantallas móviles. El código está probado, funciona y no tiene dependencias.

💡 Resumen rápido:

• Prepare un objeto SVG o PNG e insértelo en el HTML
• Fije la posición usando position: fixed y establezca los desplazamientos con unidades de viewport
• Añada un manejador de scroll en JavaScript que rote el objeto usando transform: rotate()
• Ajuste la velocidad de rotación dividiendo window.scrollY por un coeficiente
• Para móviles, añada una media query con nuevo posicionamiento y tiempo de transición

1. Preparación del objeto

El objeto puede ser cualquier cosa: un icono, logo, forma vectorial, símbolo de flecha. Recomiendo SVG, no pierde nitidez durante las transformaciones y no pesa casi nada. Si la transparencia es crítica y no tiene un vector, PNG funcionará.

Coloque la imagen dentro de un div contenedor y póngalo en el body, preferiblemente cerca del inicio. Un div separado simplifica la gestión: más adelante puede añadir elementos vecinos o reemplazar la imagen sin tocar la lógica de posicionamiento.

1
<div id="scrollContainer">
2
  <img src="img/scrollObject.svg" alt="scrollObject" id="scrollObject">
3
</div>

Puede tener múltiples objetos, solo asigne a cada uno un id único y duplique la lógica JS vinculándola a su propio elemento. Pero por ahora, construyamos una instancia funcional.

2. Posicionamiento con CSS

¿Dónde colocar el objeto? Depende del objetivo:

• Esquina inferior derecha, un icono en miniatura que no interfiere con el contenido. Clásico para blogs y portafolios.
• Esquina superior izquierda, indicador de posición de desplazamiento (rueda de progreso).
• Centro del borde inferior, elemento decorativo grande que atrae la atención hacia el pie de página.

Veamos el escenario de la esquina inferior derecha, es universal y no cubre la navegación. En CSS, escriba:

1
#scrollObject {
2
  position: fixed;
3
  right: 3vw;
4
  bottom: 3vh;
5
  top: auto;
6
  width: 7vh;
7
  height: auto;
8
  transition: 0.1s ease-out;
9
}

La clave es position: fixed. Esto fija el elemento con respecto a la ventana del navegador, no al documento. Al desplazarse, el contenido se mueve pero el objeto permanece en su lugar. Las unidades vw y vh (porcentajes del ancho y alto del viewport) ajustan automáticamente los desplazamientos para cualquier pantalla, desde un teléfono inteligente hasta un monitor 4K.

La propiedad transition: 0.1s ease-out suaviza los tirones al cambiar de posición. Para la rotación su papel es secundario, pero durante el redimensionamiento o los cambios de media query la transición se ve más limpia.

3. Animación de rotación con JavaScript

CSS puede hacer @keyframes simples, pero nuestra tarea es vincular el ángulo de rotación a la posición de desplazamiento. Aquí es donde entra JavaScript. Código mínimo funcional:

1
const scrollObject = document.getElementById("scrollObject");
2
 
3
window.addEventListener("scroll", () => {
4
  scrollObject.style.transform = `rotate(${window.scrollY}deg)`;
5
});

Lo que sucede aquí: window.scrollY devuelve el número de píxeles que la página se ha desplazado verticalmente. Este número se inserta en la función CSS rotate(), un píxel de desplazamiento equivale a un grado de rotación.

Si el objeto rota demasiado rápido, divida el valor por un coeficiente:

1
const speedFactor = window.scrollY / 2;
2
const scrollObject = document.getElementById("scrollObject");
3
 
4
window.addEventListener("scroll", () => {
5
  scrollObject.style.transform = `rotate(${speedFactor}deg)`;
6
});

Elija un divisor que se ajuste a la longitud de su página. Un valor de /2 reduce la rotación a la mitad, /4 la hace suave y apenas perceptible. Para páginas de aterrizaje largas use /6 o /8 para que el objeto no dé diez vueltas completas a mitad de página.

Nota de rendimiento

El evento scroll se dispara docenas de veces por segundo. En un sitio simple con un solo transform esto es imperceptible, pero si tiene múltiples objetos animados o un DOM pesado, envuelva la lógica en requestAnimationFrame:

1
const scrollObject = document.getElementById("scrollObject");
2
let ticking = false;
3
 
4
window.addEventListener("scroll", () => {
5
  if (!ticking) {
6
    requestAnimationFrame(() => {
7
      scrollObject.style.transform = `rotate(${window.scrollY}deg)`;
8
      ticking = false;
9
    });
10
    ticking = true;
11
  }
12
});

requestAnimationFrame agrupa las llamadas en los fotogramas de sincronización del navegador (normalmente 60 fps) y no ejecuta el recálculo de estilos en cada evento de scroll, ahorrando CPU y batería en móviles.

Añada también will-change: transform a la regla CSS de #scrollObject. Esto le indica al navegador que asigne una capa de composición de GPU por adelantado, y la rotación tendrá aceleración por hardware:

1
#scrollObject {
2
  /* ... other properties ... */
3
  will-change: transform;
4
}

4. Adaptación móvil

En pantallas de menos de 600 píxeles, la esquina inferior derecha puede entrar en conflicto con menús de hamburguesa o botones de «volver arriba». Una solución sensata es mover el objeto al centro inferior para que no cubra elementos interactivos:

1
@media only screen and (max-width: 600px) {
2
  #scrollObject {
3
    transition: 0.2s ease-out;
4
    margin-left: -4vh;
5
    width: 8vh;
6
    height: auto;
7
    top: 10px;
8
    left: 50%;
9
  }
10
}

El objeto se mueve a la parte superior de la pantalla, centrado usando left: 50% con margin-left negativo, una técnica clásica de centrado horizontal. El ancho se aumenta ligeramente (8vh en lugar de 7vh) para compensar la menor distancia de visualización.

Observe el transition: 0.2s ease-out en la media query. Al cambiar de escritorio a móvil (o durante el redimensionamiento de la ventana), el objeto no «salta» instantáneamente, sino que se desplaza suavemente a la nueva posición durante 0.2 segundos.

Si trabaja en Vue o React, extraiga el objeto de desplazamiento a un componente separado. Puede adjuntarlo al App.vue raíz o en el layout para que la animación esté presente en todas las páginas a la vez, sin duplicación de código.

Alternativa moderna: animaciones CSS vinculadas al scroll

En 2024-2025, los navegadores Chromium (Chrome, Edge, Opera) obtuvieron soporte nativo para animation-timeline: scroll(), animaciones vinculadas al desplazamiento sin una sola línea de JavaScript. Se ve así:

1
@keyframes rotate {
2
  to { transform: rotate(360deg); }
3
}
4
 
5
#scrollObject {
6
  animation: rotate linear;
7
  animation-timeline: scroll();
8
}

Ventaja: cero JavaScript, desventaja: solo en Chromium por ahora (Firefox y Safari están implementándolo). Para mejora progresiva puede combinar: dé la versión CSS a los navegadores modernos y mantenga el manejador JS como respaldo para el resto. Detalles en MDN.

⁉️🤔 Preguntas frecuentes

¿Puedo animar no solo la rotación, sino también la escala o la opacidad?

Sí. transform admite múltiples funciones a la vez. Para hacer que un objeto rote y se encoja al desplazarse: scrollObject.style.transform = \rotate(${window.scrollY}deg) scale(${1 - window.scrollY / 5000})`;. La opacidad se maneja por separado de transformusandoopacity. Combine hasta cinco o seis parámetros, pero pruebe, múltiples transformaciones en dispositivos débiles pueden causar microtirones. Uno o dos parámetros más will-change: transform` es un límite seguro para 60 fps.

**¿Qué es mejor: SVG o PNG para la animación?**

SVG, sin duda. Escala sin perder nitidez en cualquier rotación y resolución de pantalla, pesa menos y el navegador lo renderiza como vector (sin escalones de píxeles en los bordes tras rotate). Use PNG solo si ya tiene gráficos rasterizados listos y no hay tiempo para rehacerlos. Evite JPEG para objetos giratorios, los artefactos de compresión se vuelven más notorios tras la rotación.

**¿Cómo hago que la animación comience solo cuando el objeto está en el área visible?**

Use IntersectionObserver. En lugar de vincularse al scroll global, rastrea si el objeto entró en el viewport y solo entonces habilita la rotación. Esto ahorra recursos cuando el elemento está fuera de pantalla. Plantilla básica: cree un observador con threshold: 0, en el callback añada/elimine una clase .active y vincule el manejador de scroll JS a la presencia de esta clase.

**¿Por qué la animación se entrecorta en mi sitio?**

Tres causas típicas. Primera: falta will-change: transform, el navegador no entrega el elemento a la composición de GPU y recalcula el layout en cada fotograma. Segunda: propiedades que causan reflow (como width, height, margin o padding) se aplican al elemento dentro del mismo manejador de scroll. Reemplácelas con transform: scale() y transform: translate(). Tercera: el callback de scroll se ejecuta sin requestAnimationFrame y genera repintados extra entre fotogramas. Envuelva la lógica en el patrón rAF (ejemplo en la sección «Nota de rendimiento»).

**¿Es obligatorio JavaScript? Hay soluciones con CSS puro.**

Los @keyframes de CSS están vinculados al tiempo, no a la posición de desplazamiento. Sí, animation-timeline: scroll() cambia las reglas del juego, pero el soporte de navegadores aún es incompleto (ver sección 4). A mediados de 2026, la solución JavaScript con scrollY + transform sigue siendo la forma más fiable y compatible entre navegadores para vincular la rotación al desplazamiento. Todo el código cabe en 5 líneas, no tiene dependencias y funciona desde Internet Explorer 10 hasta el Chrome más reciente.

¿Debería añadir animación de desplazamiento a su sitio?

Rotar un objeto al desplazarse no es solo un «truco genial». Es una microinteracción que da al visitante retroalimentación táctil: «estoy moviendo la página y algo está sucediendo». Bien configurada, no irrita ni distrae, pero añade personalidad al sitio.

Si el sitio es minimalista, limítese a un objeto pequeño en la esquina y un coeficiente de /4 o /6. Para páginas de aterrizaje y portafolios puede jugar con más audacia: un elemento central grande con /2, animación combinada de rotación y escala, cambio de imagen al alcanzar un cierto scrollY.

Regla principal: la animación de desplazamiento debe complementar el contenido, no competir con él por la atención. Un objeto, movimiento suave, sin intrusismo, y su sitio será recordado.