Animar con el scroll

Cursos

Recursos

Blog

Cada semana nuevos hacks de desarrollo web y diseño.

Guías

Guías completas sobre TS, JS, React, Github y más.

Tutoriales

Ejercicios prácticos para dominar el desarrollo web.

Inicia sesión

Animar con el scroll

Héctorbliss

@hectorbliss

Hola 👋 En esta entrada alcanzaremos este comportamiento:

scroll animation demo

Capturaremos el scroll vertical para echar a andar un scroll horizontal.

Lo conseguiremos utilizando HTML + TailwindCSS y Vanilla JavaScript con MotionOne. ✅

Así que, si esto te interesa, pues comencemos. 🍿

👀 Puedes mirar el resultado aquí.

Maquetado HTML inicial

Este es el maquetado que necesitamos de principio, algunos elementos HTML como <article>, <section> y una lista <ul>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
    <link rel="stylesheet" href="src/index.css" />
  </head>
  <body>
    <article>
      <section
        class="bg-red-500 h-[400px] text-white text-6xl place-items-center grid"
      >
        <h2>Capturando el scroll <span class="text-black">vertical</span></h2>
      </section>
      <section class="" id="container">
        <ul class="top-0 sticky flex overflow-hidden">
          <li
            class="
              min-w-full
              h-screen
              bg-slate-500
              grid
              place-items-center
              text-8xl
            "
          >
            Block 1
          </li>
          <li
            class="
              min-w-full
              h-screen
              bg-slate-600
              text-white
              grid
              place-items-center
              text-8xl
            "
          >
            Block 2
          </li>
          <li
            class="
              min-w-full
              h-screen
              bg-slate-700
              text-white
              grid
              place-items-center
              text-8xl
            "
          >
            Block 3
          </li>
          <li
            class="
              min-w-full
              h-screen
              bg-slate-800
              text-white
              grid
              place-items-center
              text-8xl
            "
          >
            Block 4
          </li>
        </ul>
      </section>
      <section
        class="min-h-screen bg-sky-500 text-white text-6xl text-center py-44"
      >
        <h2>No olvides suscribirte ✅</h2>
        <p className="text-sky-900">www.fixtergeek.com</p>
      </section>
    </article>
    <script type="module" src="/src/scroll.ts"></script>
  </body>
</html>

Estamos utilizando TailwindCSS como estrategia de estilos, recuerda que te dejo el link al proyecto configurado y funcionando en vivo en tu navegador. Así no tienes que instalar nada tú. 🤖

Es hora de trabajar el JS

Vamos a mencionar a forma de pseudocódigo lo que necesitamos hacer:

Primero obtendremos nuestros nodos con querySelector.
Necesitamos montarnos en la detección del scroll, eso lo haremos con MotionOne.
Ahora transferiremos los valores del scroll vertical del usuario para mover la lista horizontalmente.

Comencemos entonces con los selectores.

import { animate, scroll } from 'motion';

const captureScroll = () => {
	// seleccionamos el contenedor 
  const section = document.querySelector('#container');
  // aplicar altura es importante (match entre scroll h y v)
  section.style = 'height:400vw;';
  // the magic
  scroll(animate('li', { transform: ['none', `translateX(-300%)`] }), {
    target: section, // Esto es importante.
  });
};

captureScroll();

Este es el contenido de nuestro archivo .ts. Si observas podrás ver la importación de las herramientas de motionOne, mismas que utilizamos en conjunto para capturar el scroll.

Cuéntame si esto te es útil y si lo mejoras también déjame saberlo, gracias.

Abrazo. Bliss. 🤓