HelloEveryone! - Logo

Mostrar elementos al hacer scroll con PURO CSS

diciembre 16, 20230 comments
Mostrar elementos al hacer scroll

En éste post aprenderás a como crear un efecto de aparición de bloques al hacer scroll solo con CSS. No utilizarás una sola línea de JavaScript.

En éste caso, lo haremos con imágenes pero puedes aplicarlo a cualquier div o contenedor, incluso con contenido dentro.

Estructura:

  1. Creamos nuestra estructura HTML: En éste caso hicimos una galería de imágenes y agregamos todas ellas en un contenedor.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <img src="img/alberta-2297204_640.jpg" alt="example image">
        <img src="img/Café helado con Leche condensada.webp" alt="example image">
        <img src="img/car-2942982_1920.webp" alt="example image">
        <img src="img/forest-3119826_1280.webp" alt="example image">
        <img src="img/Frappé de café con chocolate (1).webp" alt="example image">
        <img src="img/Granizado de café con vainilla.webp" alt="example image">
        <img src="img/jesus-3759617_1280.webp" alt="example image">
        <img src="img/mountains-1587287_640.jpg" alt="example image">
        <img src="img/river-219972_640.jpg" alt="example image">
        <img src="img/road-1072821_640.jpg" alt="example image">
        <img src="img/sunset-2080072_640.jpg" alt="example image">
        <img src="img/Tiramisú de cafe.webp" alt="example image">
        <img src="img/alberta-2297204_640.jpg" alt="example image">
        <img src="img/Café helado con Leche condensada.webp" alt="example image">
        <img src="img/car-2942982_1920.webp" alt="example image">
        <img src="img/forest-3119826_1280.webp" alt="example image">
        <img src="img/Frappé de café con chocolate (1).webp" alt="example image">
        <img src="img/Granizado de café con vainilla.webp" alt="example image">
        <img src="img/jesus-3759617_1280.webp" alt="example image">
        <img src="img/mountains-1587287_640.jpg" alt="example image">
        <img src="img/river-219972_640.jpg" alt="example image">
        <img src="img/road-1072821_640.jpg" alt="example image">
        <img src="img/sunset-2080072_640.jpg" alt="example image">
        <img src="img/Tiramisú de cafe.webp" alt="example image">
    </div>
</body>
Vista previa de estructura HTML
  1. Estilizamos el contenedor y lo hacemos responsivo sin media querys, utilizando display grid. También le damos un ancho máximo de 800px para hacerlo más elegante y lo alineamos al centro con margin auto.
<style>
    .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1em;
        max-width: 800px;
        margin: auto;
    }
</style>
  1. Ahora ajustamos las imágenes, dándole una relación de aspecto fija para que todas queden iguales, y configuramos el alto y el ancho para que no se nos salgan de la pantalla y se ajusten a nuestro contenedor. También ajustamos la imagen para que no se deforme con la propiedad object-fit.
<style>
    .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1em;
        max-width: 800px;
        margin: auto;
    }

    .container img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        object-fit: cover;
    }
</style>
Vista previa de estilos a imágenes de estructura HTML

Efecto de mostrar bloques al hacer scroll SOLO con CSS:

  1. Agregamos las siguientes propiedades a nuestras imágenes para que puedan tomar los datos de la animación que agregaremos luego y para que se establezca el comportamiento al hacer scroll, tanto cuando subamos como cuando bajemos.
<style>
    .container img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        object-fit: cover;
        
        /*Agregamos éstas propiedades*/
        view-timeline-name: --blocks;
        view-timeline-axis: block;
        animation-timeline: --blocks;
        animation-name: show;
        animation-range: entry 45% cover 50%;
        animation-fill-mode: both;
    }
</style>
  1. Luego creamos la animación que para que los elementos aparezcan al hacer scroll, cambiando de tamaño y corrigiendo su apariencia.
<style>
    .container img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        object-fit: cover;
        
        /*Propiedades de comportamiento de la animación*/
        view-timeline-name: --blocks;
        view-timeline-axis: block;
        animation-timeline: --blocks;
        animation-name: show;
        animation-range: entry 45% cover 50%;
        animation-fill-mode: both;
    }
    
    /*Animación que se ejecutará al hacer scroll*/
    @keyframes show {
        from {
            opacity: 0;
            transform: translatey(5%);
            scale: 95%;
        }

        to {
            opacity: 1;
            transform: translatey(0%);
            scale: 100%;
        }
    }
</style>

¡Y listo! Ya tendrás listo tu efecto finalizado y sin una sola línea de JavaScript.

Aquí tienes el código CSS y HTML completo para que lo puedas aplicar a tus proyectos. Reemplaza las URL de las imágenes con las tuyas, o prueba hacerlo con otro tipo de contenido.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        
        <!--Reemplaza con el contenido que tu gustes-->
        
        <img src="img/alberta-2297204_640.jpg" alt="example image">
        <img src="img/Café helado con Leche condensada.webp" alt="example image">
        <img src="img/car-2942982_1920.webp" alt="example image">
        <img src="img/forest-3119826_1280.webp" alt="example image">
        <img src="img/Frappé de café con chocolate (1).webp" alt="example image">
        <img src="img/Granizado de café con vainilla.webp" alt="example image">
        <img src="img/jesus-3759617_1280.webp" alt="example image">
        <img src="img/mountains-1587287_640.jpg" alt="example image">
        <img src="img/river-219972_640.jpg" alt="example image">
        <img src="img/road-1072821_640.jpg" alt="example image">
        <img src="img/sunset-2080072_640.jpg" alt="example image">
        <img src="img/Tiramisú de cafe.webp" alt="example image">
        <img src="img/alberta-2297204_640.jpg" alt="example image">
        <img src="img/Café helado con Leche condensada.webp" alt="example image">
        <img src="img/car-2942982_1920.webp" alt="example image">
        <img src="img/forest-3119826_1280.webp" alt="example image">
        <img src="img/Frappé de café con chocolate (1).webp" alt="example image">
        <img src="img/Granizado de café con vainilla.webp" alt="example image">
        <img src="img/jesus-3759617_1280.webp" alt="example image">
        <img src="img/mountains-1587287_640.jpg" alt="example image">
        <img src="img/river-219972_640.jpg" alt="example image">
        <img src="img/road-1072821_640.jpg" alt="example image">
        <img src="img/sunset-2080072_640.jpg" alt="example image">
        <img src="img/Tiramisú de cafe.webp" alt="example image">
    </div>
</body>

<style>
    .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1em;
        max-width: 800px;
        margin: auto;
    }

    .container img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
        object-fit: cover;
        view-timeline-name: --blocks;
        view-timeline-axis: block;
        animation-timeline: --blocks;
        animation-name: show;
        animation-fill-mode: both;
        
        /*Corrige los valores de animation-range para ajustarlo a tu gusto*/
        
        animation-range: entry 45% cover 50%;
    }
    
    /*Corrige la animación a tu gusto*/
    
    @keyframes show {
        from {
            opacity: 0;
            transform: translatey(5%);
            scale: 95%;
        }

        to {
            opacity: 1;
            transform: translatey(0%);
            scale: 100%;
        }
    }
</style>

</html>

Leave the first comment