Cómo crear una pantalla de presentación desplazable con CSS3 y JQuery

Una excelente manera de captar la atención de un visitante de su sitio web es una «pantalla de presentación» o una «pantalla de introducción». Sin embargo, hacer que uno tenga éxito es muy difícil por una simple razón: las pantallas de presentación irritan fácilmente a los usuarios.

Las pantallas de presentación pueden funcionar si aparecen rápidamente y se pueden descartar fácilmente. Pueden ser visualmente impactantes y hermosos, y hacer que el usuario quiera desplazarse para obtener más información. Este estilo de intros funciona muy bien en sitios web de desplazamiento de una sola página. O el ‘estilo de banner’ del diseño web que se ha puesto de moda con la tendencia del diseño plano. También puede ser muy útil para hacer un estilo de introducción de “video de fondo” atractivo que también está de moda en este momento.

Lo que quiero mostrarte hoy es un método básico para lograr este efecto, que puedes modificar fácilmente para hacer intros agradables a las experiencias web.

Si desea ver lo que estamos construyendo, aquí hay una demostración. Y puede descargar todos los archivos fuente aquí.

El marcado

Intentaremos mantener el marcado para esto muy simple. De esa manera, se puede implementar en sitios preexistentes, así como en proyectos nuevos.

Entonces, básicamente, lo que queremos hacer son dos divs. Uno con una clase de chapoteo y otro con una clase de envoltura. (Es posible que la clase contenedora ya exista de alguna manera para usted si está implementando esto en un sitio preexistente, por lo que es posible que deba variar ese nombre de clase).

Eso es. Eso es todo lo que necesitamos semánticamente. Pero obviamente agregaremos algunos títulos y contenido ficticio para que tengamos algo que ver en nuestra demostración. También necesitaremos algún tipo de flecha para agregar en la pantalla de inicio para mostrar al usuario que puede desplazarse hacia abajo (ya que este será nuestro método para hacer que la pantalla de introducción desaparezca y muestre el contenido principal).

Así que aquí está el marcado simple que va dentro de nuestro cuerpo etiqueta:

<span class="s1"><div class="splash fade-in">
</span>  <h1 class="splash-title fade-in">SPLASH SCREEN TITLE</h1>
  <a href="https://www.webdesignerdepot.com/2014/05/how-to-create-a-scrollable-splash-screen-with-css3-and-jquery/#" class="splash-arrow fade-in"><img src="img/down-arrow.png" alt="" /></a>
</div> <!-- END .splash -->
<div class="wrapper">
  <header class="cf">
    <h1><a href="https://www.webdesignerdepot.com/2014/05/how-to-create-a-scrollable-splash-screen-with-css3-and-jquery/#">Page Title</a></h1>
    <nav>
   <ul>
       <li><a href="https://www.webdesignerdepot.com/2014/05/how-to-create-a-scrollable-splash-screen-with-css3-and-jquery/#" class="active">Home</a></li>
       <li><a href="https://www.webdesignerdepot.com/2014/05/how-to-create-a-scrollable-splash-screen-with-css3-and-jquery/#">About</a></li>
       <li><a href="https://www.webdesignerdepot.com/2014/05/how-to-create-a-scrollable-splash-screen-with-css3-and-jquery/#">Work</a></li>
       <li><a href="https://www.webdesignerdepot.com/2014/05/how-to-create-a-scrollable-splash-screen-with-css3-and-jquery/#">Contact</a></li>
    </ul>
    </nav>
  </header>
  <section id="main-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, velit sapiente facere tempora ullam accusamus minus laborum porro odit sequi dolorum enim optio alias at nulla laudantium voluptatibus quibusdam quaerat provident eius quo perferendis voluptatem modi maiores cumque saepe quidem ducimus numquam et commodi cupiditate libero pariatur mollitia eveniet molestias debitis quia! Natus, minima, error, porro facere cum perferendis consequatur necessitatibus id sapiente soluta veritatis magnam quasi ut cumque provident quidem nemo enim nesciunt nihil architecto in obcaecati nobis quam tenetur corrupti. Error, soluta autem consequatur mollitia dolorem sequi iusto dolore fuga facilis esse illum accusamus ratione earum quasi ipsa doloribus odio. Architecto, natus fuga non perferendis veritatis nihil repellat dolorum rerum quidem</p>
    <br />
    <hr />
  </section>
  <footer>
    <p>&copy; 2013 - Splash Screen</p>
  </footer>
</div> <!-- END .wrapper -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

Entonces, expliquemos lo que está sucediendo aquí con un poco más de detalle: comenzamos con nuestro chapoteo div. Dentro de eso tenemos un título y nuestro indicador de desplazamiento (que aquí es una imagen de flecha, pero puede ser lo que quieras, obviamente). Luego cerramos ese div y abrimos otro con una clase de envoltura. Dentro de eso, solo tenemos algo de contenido genérico del sitio que será diferente para cada caso, pero aquí lo haremos simple: un título, algo de navegación, un área de contenido principal y un pie de página. Luego, jQuery se incluye desde la API de Google, ya que lo usaremos para la funcionalidad, y finalmente lo vinculamos a otro archivo .js que es nuestro propio en el que escribiremos nuestro código jQuery.

También puede notar que el nombre de la clase se desvanece en el área de la pantalla de presentación. Usaremos esa clase para agregar algunas animaciones CSS3 agradables a ciertos elementos y hacer que la introducción sea más poderosa. Obviamente, si miras los resultados ahora, realmente no será nada, necesitamos diseñar todo ahora. Hablando de eso, pasemos al CSS …

Estilismo

De nuevo, intentemos mantener los estilos simples y útiles. Todo esto es CSS simple. En primer lugar, comencemos con el nombre de la clase .fade-in. (Esto debe declararse en la parte superior de nuestro archivo CSS, para que podamos declarar diferentes tiempos de retardo de animación en otros elementos más abajo).

<span class="s1">@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
</span>@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1; 
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:0.3s;
    -moz-animation-duration:0.3s;
    animation-duration:0.3s;

    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

Primero declaramos los fotogramas clave y llamamos a nuestra animación fadeIn. Va de una opacidad 0 a 1. Luego apuntamos directamente al nombre de la clase, especificamos que tiene opacidad 0. e invocamos la animación que acabamos de especificar, haz que dure 0,3 sy dale un retraso de 0,5 s.

Ahora veamos el CSS necesario para nuestra página de inicio:

<span class="s1">.splash {
 </span>    background: url('../img/splash-bg.jpg') center center;
     background-size: cover;
     background-attachment: fixed;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     min-height: 360px;
     z-index: 999;
     text-align: center;
 }

Estamos solicitando una imagen de fondo (aquí es solo una foto en blanco y negro de una calle), que estamos centrando, también asegurándonos de que cubra toda la pantalla en cualquier tamaño y adjuntándola, lo que significa que ‘ No me moveré en el pergamino. Luego le damos una posición ‘fija’ y especificamos que debe estar a una distancia de 0 de la parte superior, derecha, inferior e izquierda; por lo tanto, llena toda la ventana del navegador. Luego le daremos una altura mínima ya que lo que colocaremos dentro estará absolutamente posicionado. Asegúrese de que tenga un índice Z alto, ya que queremos que aparezca sobre el resto del contenido de la página (que ahora se colocará directamente debajo de nuestra pantalla de bienvenida, ya que tiene una posición fija).

Ahí lo tienes, esos son todos los estilos que realmente se necesitan para que la pantalla de presentación aparezca en el lugar correcto de la página. Llenando la pantalla y sobre todo el resto de contenidos, sin cambiar en absoluto el flujo de la página. Así que ahora le daré rápidamente el resto del CSS, que principalmente coloca el título en el lugar correcto, agregue una bonita flecha hacia abajo para indicar que el usuario debe desplazarse. Y finalmente, algunos estilos básicos para la página y algunas consultas de medios:

<span class="s1">html, body {
</span>    width: 100%;
    height: 100%;
}

body { font: normal 1em/1.5em 'Open Sans', sans-serif; color: #333; margin-bottom: 20px; }
    .wrapper {
      max-width: 1000px;
      width: 90%;
      margin: 0 auto; 
}

.splash-title {
    color: white;
    font-size: 3em;
    margin-top: 100px;
    text-shadow: 0 2px 10px #000;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

a.splash-arrow {
    color: white;
    font-size: 1.2em;
    position: absolute;
    bottom: 55px;
    left: 50%;
    margin-left: -25px;
    padding: 10px;
    width: 50px;
    height: 50px;
    font-weight: bold;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    animation-delay: 1.5s;
    border: 3px solid white;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

a.splash-arrow:hover {
    text-decoration: none;
    bottom: 50px;
}

@media all and (max-width: 690px) {
    header h1 { width: 100%; text-align: center; }
    header nav { float: none; display: inline-block; margin: 0 auto; }
      .splash-title {font-size: 2em;}
}

@media all and (max-width: 480px) {
    .splash-title {font-size: 1.5em;}
}

Así que aquí tenemos estilos de cuerpo generales, algo de relleno en la parte superior del título, donde también retrasamos el desvanecimiento en la animación otro medio segundo. Entonces tiene su propia entrada. El enlace de la flecha está absolutamente posicionado, para estar siempre en el medio y en la parte inferior de la pantalla. Tiene otro retraso de medio segundo para aparecer definitivo en la pantalla. Estamos agregando algunas transiciones CSS3 para que los cambios de posición en el estado: hover estén animados. Finalmente, tenemos algunos pequeños cambios en la consulta de medios para que se vea un poco mejor en pantallas más pequeñas. Pero obviamente estos estilos cambiarán según tu diseño.

jQuery

Entonces, como declaramos anteriormente, vamos a crear un archivo llamado main.js en un js directorio. Dentro de eso, escribiremos nuestro jQuery que hace que la pantalla de inicio desaparezca en el desplazamiento o cuando hace clic en el enlace de la flecha. Aquí lo tienes:

$(document).ready(function() {
    if($(".splash").is(":visible")) {
        $(".wrapper").css({"opacity":"0"});
    }

    $(".splash-arrow").click(function() {
        $(".splash").slideUp("800", function() {
            $(".wrapper").delay(100).animate({"opacity":"1.0"},800);
        });
    });
});

$(window).scroll(function() {
    $(window).off("scroll");
    $(".splash").slideUp("800", function() {
        $("html, body").animate({"scrollTop":"0px"},100);
        $(".wrapper").delay(100).animate({"opacity":"1.0"},800);
    });
});

En primer lugar, estamos envolviendo nuestras primeras declaraciones dentro de un documento listo función, para tomar medidas solo cuando la página se haya cargado por completo. Entonces, para comenzar, verificamos si nuestra pantalla de inicio está visible. Si es así, hacemos la envoltura invisible (para que no tengamos destellos de contenido mientras se carga la imagen de fondo, y también para hacer un desvanecimiento final en la animación una vez que lleguemos a la página). Luego agregamos una función al controlador de clic en la flecha. Entonces, si el usuario hace clic en él, la pantalla de inicio se desliza hacia arriba (y por lo tanto desaparece) y luego animamos la opacidad del contenedor de nuevo a 1.

Este pequeño bloque de código es (casi) el mismo que usaremos justo después en el $ (ventana) .scroll función. Entonces, cuando el usuario se desplaza, deslizamos hacia arriba el splash, y luego esta vez animamos de nuevo a la parte superior de la página (para que el usuario no comience a la mitad de la página) y animamos la opacidad del elemento contenedor. También agregamos en esa línea $ (ventana) .off («desplazarse»); que evita que la ventana se desplace realmente cuando no queremos que lo haga. Cuando el usuario se desplaza por primera vez, queremos que se active la animación y no que se desplace por la página. Pero una vez finalizada la introducción, la página se desplazará normalmente.

Conclusión

Así que ahí lo tienes, una solución muy simple (liviana) pero elegante para agregar una pantalla de introducción a la parte superior de tu sitio y hacer que desaparezca en el desplazamiento o cuando el usuario hace clic en un elemento específico. No dude en tomar este código, utilizarlo y modificarlo para adaptarlo a sus necesidades.

Como mencioné al principio, esta técnica se puede usar de muchas maneras diferentes, ¡así que sea creativo!