BLOG HTML

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

Scroll Animation Landing Page

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

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

VER DEMO 567

CSS HTML Javascript

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

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

DESCARGAR

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 567 veces | Publicado hace 3 meses

Curso Flutter y Laravel Tienda Delivery

Curso Flutter y Laravel Tienda Abarrotes con Delivery

Mira el temario del curso en el siguiente link
VER MÁS DETALLES DEL CURSO

Logo Codea App

Develop your code

CORE

ENLACES

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