Animaciones Scroll con puro CSS Tutorial practico

Las Animaciones Scroll con puro CSS son herramientas fascinantes que mejoran la experiencia del usuario al navegar por un sitio web. En este tutorial, exploraremos cómo utilizar propiedades como animation-timeline: view() y animation-timeline: scroll() para crear animaciones interactivas y atractivas sin necesidad de incorporar JavaScript.

Queria compartirles como hacer unas animaciones practicas y muy utiles para el estilo de tu sitio web esto te ayudara mucho a la hora de darle movimiento a tu sitio web o landing sin necesidad de cargar codigo JavaScript

Empecemos con la propiedad animation-timeline: view()

La propiedad animation-timeline: view() permite controlar el progreso de las Animaciones Scroll con puro CSS en función de la visibilidad de un elemento en el viewport. Esto significa que puedes sincronizar estas animaciones con el desplazamiento del usuario, creando interacciones que se activan al entrar en la vista.

en pocas palabras hace que tus animaciones interactuen con el usuario cuando el usuario en si pase por el contenedor de la animacion.

Es esta ocacion hare una animacion de aparecer con opacidad o tambien llamada «Fade-in» con solo CSS.

Animacion de opacidad Fade-in solo CSS

En esta sección, aprenderemos a implementar una Animación Scroll con puro CSS que haga aparecer un elemento mediante una animación de opacidad. Utilizaremos animation-timeline: view() para activar la animación cuando el elemento se haga visible.

Les dejo explicacion de los elementos a utilizar:

• #image-UCTXPgBmvp: Selecciona el elemento con un id específico.
• animation: aparecer linear;: Aplica la animación llamada aparecer con una transición lineal.
• animation-timeline: view();: Hace que la animación se active al entrar en el campo visible (viewport) del usuario.
• animation-range: entry 0% cover 40%;: Define el rango o porcentaje de scroll del viewport en el que se ejecutará la animación.
• @keyframes: Define los estados inicial (0%) y final (100%) de la animación.
  • En este caso:
    • Al inicio (0%), el elemento tiene una opacidad de 0 (es invisible).
    • Al final (100%), la opacidad es 1 (totalmente visible).

<style>
#image-UCTXPgBmvp {
  animation: aparecer linear; /* nombre de la animación + tipo de curva */
  animation-timeline: view(); /* asegura que suceda al estar dentro del viewport */
  animation-range: entry 0% cover 40%; /* define cuándo comienza y acaba */
}

@keyframes aparecer {
  0% {
    opacity: 0; /* completamente transparente */
  }
  100% {
    opacity: 1; /* completamente visible */
  }
}
</style>
<div id="image-UCTXPgBmvp">
  <img src="https://rspaginasweb.com/wp-content/uploads/2024/07/experiencia-de-usuario-importancia.webp" alt="" style="max-width:300px; width:100%">
</div>

Animacion de opacidad y movimiento desde la izquierda Fade-left solo CSS

Esta animación no solo hace que el elemento sea visible, sino que también se mueve desde la izquierda. Al igual que con la animación anterior, utilizamos animation-timeline: view() para sincronizar la animación con el desplazamiento del usuario.

Explicación

• .entrar-izquierda: Selecciona los elementos con esta clase.
• textanimation: fade-izquierda cubic-bezier(0, 0, 0.01, 0.46);: Aplica la animación y usa una curva personalizada para un movimiento más natural.
• @keyframes fade-izquierda define los cambios:
  • 0%: El elemento es completamente invisible (opacity: 0) y empieza fuera del marco visible (transform: translateX(-100%)).
  • 50%: Durante la mitad de la animación, el elemento aún está invisible.
  • 100%: El elemento aparece (opacity: 1) y ocupa su posición natural en el DOM (translateX(0%)).

Esta técnica es perfecta para introducir elementos de manera dinámica, como menús laterales o cuadros de texto.

<style>
.entrar-izquierda {
  animation: fade-izquierda cubic-bezier(0, 0, 0.01, 0.46); /* animación con curva personalizada */
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

@keyframes fade-izquierda {
  0% {
    opacity: 0; /* invisible al principio */
    transform: translateX(-100%); /* comienza fuera del viewport, hacia la izquierda */
  }
  50% {
    opacity: 0; /* sigue invisible hasta la mitad de la animación */
  }
  100% {
    opacity: 1; /* completamente visible */
    transform: translateX(0%); /* regresa a su posición original horizontal */
  }
}
</style>
<div class="entrar-izquierda">
  <img src="https://rspaginasweb.com/wp-content/uploads/2024/07/experiencia-de-usuario-importancia.webp" alt="" style="max-width:300px; width:100%">
</div>

Animacion de escala solo CSS

En esta sección, exploramos cómo una Animación Scroll con puro CSS puede ser utilizada para escalar un elemento desde un tamaño pequeño hasta su tamaño original. Aplicando animation-timeline: view(), podemos asegurar que la animación se ejecute al ser visible.

Explicación

• .escala-intro: Aplica la animación de escala al elemento seleccionado mediante la clase.
• textanimation: scale-int cubic-bezier(0, 0, 0.01, 0.46);: Controla el cambio de tamaño con un ritmo fluido gracias a la curva personal.
• @keyframes scale-int define:
  • 0%: El elemento está completamente reducido (transform: scale(0)).
  • 100%: El elemento crece hasta recuperar su tamaño usual (transform: scale(1)).

Es ideal para destacar imágenes o tarjetas que llamen la atención del usuario.

<style>
.escala-intro {
  animation: scale-int cubic-bezier(0, 0, 0.01, 0.46); /* animación usando curva personalizada */
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
  text-align: center;
}

@keyframes scale-int {
  0% {
    transform: scale(0); /* completamente reducido (apenas visible) */
  }
  100% {
    transform: scale(1); /* tamaño original */
  }
}
</style>
<div class="escala-intro">
  <img src="https://rspaginasweb.com/wp-content/uploads/2024/07/experiencia-de-usuario-importancia.webp" alt="" style="max-width:300px; width:100%">
</div>

Continuemos con la propiedad animation-timeline: scroll(root)

La propiedad animation-timeline: scroll(root) se utiliza para sincronizar animaciones con el desplazamiento general del documento, mejorando la experiencia visual al alinear Animaciones Scroll con puro CSS con el contenido en movimiento.

en pocas palabras a diferencia de animation-timeline: view() que se ejecuta cuando ya estas haciendo scroll en el contenedor al que le colocaste la propiedad, animation-timeline: scroll(root) se ejecuta desde el inicio del body desde que empiezas a hacer scroll ya la propiedad esta trabajando a continuacion les dejo ejemplos.

Hagamos que una imagen se vaya desplazando en su contenedor mientras vamos haciendo scroll

Con esta implementación, crearemos un efecto visual donde la imagen se desplaza hacia arriba mientras el usuario hace scroll. Utilizaremo animation-timeline: scroll(root) para vincular la animación al desplazamiento del documento.

Explicación

1. Contenedor .revelar-image:
   • width y height: Definen las dimensiones del contenedor donde se visualizará la imagen. Esto limita el área visible disponible.
   • overflow: hidden;: Asegura que cualquier parte de la imagen que no encaje dentro de las dimensiones del contenedor permanezca oculta. Esto es clave para el efecto de revelado, ya que la imagen comenzará fuera de la vista.
   • margin: 20px auto;: Permite que el contenedor tenga un margen superior e inferior de 20 píxeles, y al ser auto a los lados, centra el contenedor horizontalmente en la página.
2. Imagen dentro del contenedor .revelar-imagen img:
   • width y height: Estas propiedades aseguran que la imagen ajusta completamente el contenedor sin dejar espacios.
   • object-fit: cover;: Se utiliza para que la imagen escale y cubra todas las dimensiones del contenedor, recortando cualquier parte que no se ajuste.
   • transform: translateY(100%);: Comienza el efecto de animación trasladando la imagen completamente fuera de la vista hacia abajo. En este punto, la imagen no será visible porque está debajo del contenedor.
   • animation: revelar2 linear forwards;: Activará la animación definida más adelante, que moverá la imagen hacia arriba de forma continua y suave (lineal) durante el desplazamiento del contenido. La opción forwards permite que la imagen mantenga la última posición al final de la animación.
   • animation-timeline: scroll(root);: Asocia la animación con el desplazamiento del documento. La animación se activará a medida que el usuario comience a desplazarse.
3. Animación @keyframes revelar2:
   • Define los pasos de la animación llamada revelar2. En este caso, el paso final (to) modifica la transformación de la imagen, moviéndola hacia arriba al 50% de su altura desde la posición inicial de 100% (fuera de vista).
   • Al completarse la animación, la parte visible de la imagen será solo la mitad superior de la misma, creando un efecto de revelado.

  <style>
  .revelar-image {
    width: 500px; /* Establece el ancho del contenedor en 500 píxeles. */
    height: 300px; /* Establece la altura del contenedor en 300 píxeles. */
    overflow: hidden; /* Oculta cualquier contenido que se salga del contenedor. Esto es crucial para el efecto de revelado. */
    margin: 20px auto; /* Aplica un margen de 20 píxeles arriba y abajo, centrándolo horizontalmente en la página. */
  }
  
  .revelar-imagen img {
    width: 100%; /* Hace que la imagen ocupe el 100% del ancho del contenedor. */
    height: 100%; /* Hace que la imagen ocupe el 100% de la altura del contenedor. */
    object-fit: cover; /* Asegura que la imagen se recorte y escale adecuadamente para llenar el contenedor, manteniendo su proporción. */
    transform: translateY(100%); /* Mueve la imagen completamente fuera de la vista hacia abajo, al 100% de su altura. */
    animation: revelar2 linear forwards; /* Aplica la animación 'revelar2' con un movimiento lineal y mantiene la última posición de la animación cuando termina. */
    animation-timeline: scroll(root); /* Sincroniza la animación con el desplazamiento del usuario en el documento. */
  }
  
  @keyframes revelar2 {
    to {
      transform: translateY(-50%); /* La animación mueve la imagen hacia arriba, revelando su parte superior, terminando en el 50% de su altura. */
    }
  }
</style>

<div class="revelar-image">
  <img src="https://rspaginasweb.com/wp-content/uploads/2024/07/experiencia-de-usuario-importancia.webp" alt="Imagen que se revela">
</div>

Hagamos un circulo que se vaya rellenando mientras vamos haciendo scroll

La siguiente animación llenará un círculo a medida que el usuario desplaza la página. Esto se logra utilizando animation-timeline: scroll(root) para garantizar que la visualización del progreso se sincronice con el scroll.

Cuando un usuario se desplaza hacia abajo en la página, el círculo comienza a llenarse de color, brindando una sensación de progreso o actividad.

  .circulo-relleno {
    width: 200px;  /* Establece el ancho del contenedor del círculo a 200 píxeles */
    height: 200px;  /* Establece la altura del contenedor del círculo a 200 píxeles, creando un cuadrado */
    background: transparent;  /* El fondo es transparente para mostrar sólo el borde y el contenido interno */
    position: relative;  /* Posiciona el contenedor como relativo, permitiendo que los elementos absolutos dentro se posicionen en relación a él */
    border-radius: 50%;  /* Redondea las esquinas al 50%, formando un círculo */
    border: 1px solid #00a19a;  /* Agrega un borde sólido de 1 píxel en color verde claro alrededor del círculo */
    right: 0;  /* Posiciona el círculo hacia la derecha dentro de su contenedor, aunque no se utiliza de forma visible aquí */
    bottom: 0;  /* Posiciona el círculo hacia abajo dentro de su contenedor, aunque no se utiliza de forma visible aquí */
    overflow: hidden;  /* Asegura que cualquier contenido que sobresalga del contenedor no se muestre */
}

.circulo-relleno:before {
    content: '';  /* Necesario para que el pseudo-elemento :before se muestre; definido como vacío */
    width: 100%;  /* Establece el ancho del pseudo-elemento al 100% del contenedor (círculo) */
    animation: rellenar linear forwards;  /* Aplica la animación 'rellenar' de forma lineal y manteniendo el estado final */
    animation-timeline: scroll(root);  /* Víncula la animación a la acción de desplazamiento en la página */
    background: #00a19a;  /* Establece el color de fondo del pseudo-elemento al mismo verde claro que el borde */
    z-index: 2;  /* Asegura que el pseudo-elemento esté por encima de otros elementos en el contexto de apilamiento */
    transition: 2s;  /* Define una transición suave de 2 segundos para cualquier propiedad que cambie */
    display: block;  /* Hace que el pseudo-elemento se comporte como un bloque, ocupando espacio y alineándose correctamente */
}

.circulo-relleno span {
    position: absolute;  /* Permite que el texto se posicione en relación al contenedor .circulo-relleno */
    top: 50%;  /* Posiciona verticalmente el texto en el centro del contenedor */
    left: 50%;  /* Posiciona horizontalmente el texto en el centro del contenedor */
    transform: translate(-50%, -50%);  /* Compensa el desplazamiento de la posición centrada para que el texto quede realmente centrado */
    background-blend-mode: difference;  /* Cambia la forma en que se mezcla el color de fondo con el del texto, creando un contraste destacado */
    color: #00a19a;  /* Establece el color del texto al verde claro para que coincida con el pseudo-elemento */
    font-weight: bold;  /* Hace que el texto se muestre en negrita para mayor visibilidad */
    mix-blend-mode: difference;  /* Permite que el color del texto se mezcle de una forma que contrasta con el fondo, proporcionando un efecto visual interesante */
}

@keyframes rellenar {
    from {
        height: 0%;  /* Comienza la animación con una altura del pseudo-elemento de 0%, lo que significa que no está visible al inicio */
    }
    to {
        height: 100%;  /* Termina la animación con una altura al 100%, haciendo que el pseudo-elemento llene completamente el círculo */
    }
}

Hagamos una barra que se vaya rellenando mientras vamos haciendo scroll

Finalmente, implementamos una barra de progreso que se visualiza mientras el usuario hace scroll. Con animation-timeline: scroll(root), se indicará el progreso del desplazamiento en contenido extenso.

Este enfoque permite visualizar en tiempo real el progreso del desplazamiento, siendo una herramienta visual efectiva en sitios web que presentan contenido extenso o largo, mostrando al usuario cuánto ha avanzado y cuánto contenido queda por visualizar.

  <style>

.progreso-barra {
    position: relative; /* Establece la posición del contenedor de la barra de progreso. 'relative' permite que los elementos hijos se posicionen en relación con este contenedor. */
    top: 0; /* No hay desplazamiento vertical, el contenedor estará alineado en la parte superior. */
    left: 0; /* No hay desplazamiento horizontal, el contenedor estará alineado a la izquierda. */
    width: 100%; /* El contenedor de la barra de progreso ocupará el 100% del ancho de su contenedor padre. */
    height: 5px; /* La altura de la barra de progreso se fija en 5 píxeles. */
    background-color: lightgray; /* El fondo de la barra de progreso se establece en color gris claro, visualizando el área que no ha sido completada. */
} 

.progreso-barra::after {
    content: ""; /* Crea un pseudo-elemento vacío para representar la parte "completada" de la barra de progreso. */
    display: block; /* Se asegura de que el pseudo-elemento se comporte como un bloque, ocupando el espacio del contenedor. */
    height: 100%; /* El alto del pseudo-elemento es igual al del contenedor, lo que permite que ocupe toda la altura de la barra. */
    width: 0%; /* Inicialmente, el ancho de la parte completada es 0%, lo que significa que está vacía al inicio. */
    background-color: #00a19a; /* Color de fondo del pseudo-elemento que representa la parte completada, en este caso un tono verde azulado. */
    animation: progreso-barraex linear; /* Se aplica una animación llamada 'progreso-barraex' para gradualmente cambiar el ancho del pseudo-elemento. */
    animation-timeline: scroll(root); /* Se especifica una línea de tiempo de animación relacionada con el desplazamiento de la página. */
}


 @keyframes progreso-barraex {
    0% { /* Al inicio de la animación (0% del tiempo) */
        width: 0%; /* El ancho del pseudo-elemento es 0%, por lo que no se ve. */
    }
    100% { /* Al final de la animación (100% del tiempo) */
        width: 100%; /* Se cambia el ancho a 100%, llenando completamente la barra de progreso. */
    }
}

  </style>
  <div class="progreso-barra"></div>

Conclusión

Las Animaciones Scroll con puro CSS son una técnica poderosa para mejorar la interacción y el dinamismo en un sitio web. Utilizando animation-timeline: view() y animation-timeline: scroll(), los desarrolladores pueden crear experiencias visuales atractivas y fluidas. Experimenta con estos ejemplos y mejora tu diseño web sin necesidad de JavaScript.