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

Landing Page con Html+Css y Js

Menú en HTML CSS y Javascript fullscreen

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

VER DEMO

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.

Descarga código fuente 812

Talvez tiene el código fuente para descargar

Ver Código Fuente

Redactado por: , Leido 5693 veces

Compartir enlace del tutorial

Link Whatsapp Messenger Facebook Twitter

Más tutoriales de programación HTML

1 Conoce las nuevas etiquetas HTML5 que te ayudaran a maquetar mejor 2 Diseño Web en HTML + CSS para un Restaurante 3 Diseño Web HTML + CSS para una tienda de zapatillas 4 Diseño Web en HTML y CSS para una constructora 5 Página web animada en Html + Css y JS 6 Centrar Botones y Animar Fondo 7 Landing Page con Html+Css y Js 8 Scroll Animation Landing Page 9 Menú en HTML CSS y Javascript fullscreen 10 Diseño de Menú con buscador responsive en HTML + CSS + JS

Scroll Animation Landing Page