Scroll Animation Landing Page

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

VIDEO Animación Scroll Page

¿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.

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.

¿Quieres descargar el código fuente Scroll Animation Landing Page?
...por favor suscríbete gratuitamente para descargarlo

CSS HTML Javascript

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 1028 veces | Publicado hace 7 meses

Curso HTML + CSS Página Web Básica

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021