¿Cómo hacer una animación Scroll en una Landing Page con JS

Para la animación Scroll podemos usar HTML + CSS y Javascript en el diseño de una Landing Page, donde la combinación nos permite montar una animación fluid

Suscríbete a nuestro canal en Youtube

Para la animación Scroll podemos usar HTML + CSS y Javascript en el diseño de una Landing Page, donde la combinación nos permite montar una animación fluid.

Bien, contextualizando este tutorial en ocasiones necesitamos implementar un sitio web o más específicamente una Landing Page.

¿Que es una Landing Page?

Según Wikipedia: es una página web a la que una persona llega tras pulsar en el enlace o botón en una guía, un portal o algún banner o anuncio de texto situado en otra página web, aplicación, red social, E-mail o portal de internet.

Complementando podría decir que son páginas muy rápidas dotadas de un buen diseño generalmente minimalista y simple dónde se aplica el concepto de llamado a la acción. Son diseñadas con la finalidad de captar leads para convertirlos en clientes. En su estructura pueden contener imágenes y/o videos promocionales, textos elaborados para convencer al cliente y un formulario para tomar los datos del usuario.

Aclarando en éste tutorial solo vamos a crear una plantilla muy básica que puede ayudarte a implementar una LandingPage con una animación scroll de las secciones internas.

¿Qué vamos a implementar?

La implementación que vamos a realizar es una página muy básica donde vamos a disponer los contenidos en secciones apiladas hacia la parte inferior.

Secciones a destacar:

Menu principal de navegación
Sección Inicio
Sección Bio
Sección Skills
Sección Portafolio
Sección Contacto

Características del desarrollo web

Atributos o características en el desarrollo del código en Html y CSS y Javascript

Estructura simple en HTML
Aplicación de funcionalides interesantes en CSS como animación por keyframes, degradados avanzados, posición y distribución de elementos con Flexbox, etc
Javascript puro para realizar la animación de cada sección de entrada y salida.

Código Html + CSS y Javascript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SCROLL LANDING PAGE SOLO CON CSS Y JAVASCRIPT</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <style>
        :root{
            --colorPrimario: peru;
            --colorSecundario: chocolate;
            --colorPrimarioClaro: tan;
            --ColorBlanco: white;

        }
        html,body{
            margin: 0;
        }
        body{
            background: radial-gradient(
                var(--colorPrimario),
                var(--colorSecundario)
            );
            height: 100vh;
            font-family: 'Roboto', sans-serif;

        }
        ul{
            display: flex;
            position: fixed;
            width: 100%;
            z-index: 1;
            justify-content: space-evenly;
            padding: 15px;
            margin: 0;
            background: linear-gradient(
                90deg,
                var(--colorSecundario),
                var(--colorPrimario),
                var(--colorSecundario)
            ) ;

        }
        ul li{
            list-style: none;
        }
        ul li a{
            color: var(--ColorBlanco);
            text-decoration: none;
        }

        .paginas{}
        .pagina{
            top: 0px;
            left: 0px;
            height: 100vh;
            width: 100%;
            position: absolute;
            flex-direction: column;
            transform: translateY(100%);
            display: flex;
            justify-content: center;
            align-items: center;

        }
        .pagina .contenido{
            padding: 50px;
            margin: 50px;
            border-radius: 20px;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.365);
            
            display: flex;
            height: 50vh;
            flex-direction: column;
            
            background: linear-gradient(
                45deg,
                var(--ColorBlanco) 90%,
                var(--colorPrimario) 90%
                );
        }
        /* animacion para entrar el slide*/
        @keyframes animacionEntrar {
            
        }
        /* animacion para salir el slide*/
        @keyframes animacionSalir {
            
        }
        .active{
            transform: translateY(0%);
        }

        @media (max-width: 500px) {
            ul{
                flex-direction: column;
            }
            ul li{
                padding: 10px;
            }
        }

    </style>
</head>
<body>
    <ul>
        <li><a href="#" class="boton" id="inicio">Inicio</a></li>
        <li><a href="#" class="boton" id="bio">Bio</a></li>
        <li><a href="#" class="boton" id="skills">Skills</a></li>
        <li><a href="#" class="boton" id="portafolio">Portafolio</a></li>
        <li><a href="#" class="boton" id="contacto">Contacto</a></li>
    </ul>

    <div class="paginas">
        <div id="pagina_inicio" class="pagina active" >
            <div class="contenido">
                <h1>SECCIÓN: INICIO</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non laboriosam ex vel praesentium deserunt tenetur ullam iste deleniti libero ratione, laudantium fuga voluptatibus quos sit dolore, itaque labore, minus dicta. <br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, explicabo. Laboriosam voluptatem fugiat dicta sint doloremque praesentium perspiciatis, id culpa quaerat temporibus, explicabo nam eum excepturi? Aliquid beatae in odit.</p>
            </div>
        </div>
        <div class="pagina" id="pagina_bio">
            <div class="contenido">
                <h1>SECCIÓN: BIO</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non laboriosam ex vel praesentium deserunt tenetur ullam iste deleniti libero ratione, laudantium fuga voluptatibus quos sit dolore, itaque labore, minus dicta. <br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, explicabo. Laboriosam voluptatem fugiat dicta sint doloremque praesentium perspiciatis, id culpa quaerat temporibus, explicabo nam eum excepturi? Aliquid beatae in odit.</p>
            </div>
        </div>
        <div class="pagina" id="pagina_skills">
            <div class="contenido">
                <h1>SECCIÓN: SKILLS</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non laboriosam ex vel praesentium deserunt tenetur ullam iste deleniti libero ratione, laudantium fuga voluptatibus quos sit dolore, itaque labore, minus dicta. <br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, explicabo. Laboriosam voluptatem fugiat dicta sint doloremque praesentium perspiciatis, id culpa quaerat temporibus, explicabo nam eum excepturi? Aliquid beatae in odit.</p>
            </div>
        </div>
        <div class="pagina" id="pagina_portafolio">
            <div class="contenido">
                <h1>SECCIÓN: PORTAFOLIO</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non laboriosam ex vel praesentium deserunt tenetur ullam iste deleniti libero ratione, laudantium fuga voluptatibus quos sit dolore, itaque labore, minus dicta. <br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, explicabo. Laboriosam voluptatem fugiat dicta sint doloremque praesentium perspiciatis, id culpa quaerat temporibus, explicabo nam eum excepturi? Aliquid beatae in odit.</p>
            </div>
        </div>
        <div class="pagina" id="pagina_contacto">
            <div class="contenido">
                <h1>SECCIÓN: CONTACTO</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non laboriosam ex vel praesentium deserunt tenetur ullam iste deleniti libero ratione, laudantium fuga voluptatibus quos sit dolore, itaque labore, minus dicta. <br>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, explicabo. Laboriosam voluptatem fugiat dicta sint doloremque praesentium perspiciatis, id culpa quaerat temporibus, explicabo nam eum excepturi? Aliquid beatae in odit.</p>
            </div>
        </div>
    </div>

    <script>
       ...
    </script>
</body>
</html>

Espero que les haya ayudando, solo pedirles que lo compartan por si alguien puede necesitar este código. Hasta un próximo video tutorial.

Leido 7558 veces