Una excelente manera de llamar la atención de un visitante a su sitio web es una "pantalla de inicio" o una "pantalla de introducción". Sin embargo, hacer una exitosa es muy difícil por una simple razón: las pantallas de bienvenida irritan fácilmente a los usuarios.
Las pantallas de bienvenida pueden funcionar si aparecen rápidamente y son fácilmente descartables. Pueden ser visualmente llamativos 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' de diseño web que se ha puesto de moda con la tendencia de diseño plano. También puede ser muy útil crear un estilo de introducción de "video de fondo" que también esté de moda en este momento.
Lo que quiero mostrarles hoy es un método básico para lograr este efecto, que puede modificar fácilmente para crear intros agradables para las experiencias web.
Si quieres ver lo que estamos construyendo, hay una demostración aquí. Y tu puedes descargue todos los archivos fuente aquí.
El marcado
Vamos a tratar de mantener el marcado para esto muy simple. De esta forma, puede implementarse en sitios preexistentes y en nuevos proyectos.
Entonces, básicamente, lo que queremos hacer es dos divs. Uno con una clase de salpicadura 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 modificar ese nombre de clase).
Eso es. Eso es todo lo que necesitamos semánticamente. Pero, obviamente, agregaremos contenido ficticio y títulos para que tengamos algo que ver en nuestra demostración. También necesitaremos algún tipo de flecha para agregar en la pantalla de presentación para mostrarle al usuario que puede desplazarse hacia abajo (ya que este será nuestro método para hacer desaparecer la pantalla de introducción y traer el contenido principal).
Así que aquí está el marcado simple que va dentro de la etiqueta de nuestro cuerpo :
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, velit sapiente facere tempora ullam accusamus menos laborum porro odit sequi dolorum enim optio alias en 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, mínimo, error, porro facere cum perferendis consequatur necessitatibus id sapiente soluta veritatis magnam cuasi ut cumque provident quidem nemo enim nesciunt nihil architecto en obcaecati nobis quam tenetur corrupti. Error, soluta autem consequatur mollitia dolorem sequi iusto dolore fuga facilis esse illum accusamus ratione earum cuasi ipsa doloribus odio. Architecto, natus fuga non perferendis veritatis nihil repellat dolorum rerum quidem
Así que vamos a explicar qué está pasando aquí con un poco más de detalle: comenzamos con nuestro splash div. Dentro de eso tenemos un título y nuestro indicador de desplazamiento (que aquí es una imagen de flecha, pero puede ser cualquier cosa que quieras que sea, obviamente). Luego cerramos ese div y abrimos otro con una clase de envoltura . Dentro de eso, tenemos algo de contenido de sitio genérico que será diferente para cada caso, pero aquí lo mantendremos simple: un título, algo de navegación, un área de contenido principal y un pie de página. Entonces jQuery se incluye desde la API de Google, ya que lo usaremos para la funcionalidad, y finalmente enlazamos con otro archivo .js que es el nuestro en el que escribiremos nuestro código jQuery.
También puede observar el desvanecimiento del nombre de clase en el área de la pantalla de bienvenida. Usaremos esa clase para agregar algunas bonitas animaciones de CSS3 a ciertos elementos y hacer que la introducción sea más poderosa. Obviamente, si miras los resultados ahora, realmente no será nada, tenemos que diseñar todo ahora. Hablando de eso vamos a entrar al CSS ...
Estilo
Nuevamente intentemos mantener los estilos simples y útiles. Esto es todo CSS simple. Antes que nada, comencemos con el nombre de la clase .fade-in. (Esto tiene que declararse en la parte superior de nuestro archivo CSS, para que podamos declarar tiempos de demora de animación diferentes en otros elementos más adelante).
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-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;}
Estamos declarando los fotogramas clave primero y llamando a nuestra animación fadeIn. Va desde una opacidad de 0 a 1. Entonces nos dirigimos al nombre de la clase directamente, especificamos que tiene 0 opacidad. y llamar a la animación que acabamos de especificar, hacer que dure 0.3s y darle un retraso de 0.5s.
Ahora veamos el CSS necesario para nuestra página de bienvenida:
.splash { 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 llamando en 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 cubre toda la pantalla al tamaño que sea, y adjuntarla, lo que significa que ' No moveré en scroll. Luego le damos una posición 'fija' y especificamos que debe estar a una distancia de 0 de arriba, derecha, abajo e izquierda, por lo tanto, llena toda la ventana del navegador. Entonces le daremos una altura mínima ya que lo que colocaremos dentro estará absolutamente posicionado. Asegúrese de que tenga un alto índice Z, 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, son todos los estilos que realmente se necesitan para que la pantalla de bienvenida aparezca en el lugar correcto de la página. Rellenar la pantalla y, sobre todo, cualquier otro contenido, sin cambiar el flujo de la página. Así que ahora rápidamente le daré el resto del CSS, que principalmente coloca el título en el lugar correcto, agregue una buena 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:
html, body { 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 generales de cuerpo, algunos rellenos superiores en el título, donde también retrasamos el fundido en animación por medio segundo. Entonces tiene su propia entrada. El enlace de flecha está absolutamente posicionado, para estar siempre en el medio y la parte inferior de la pantalla. Tiene medio segundo de retraso para aparecer como final de la pantalla. Estamos agregando algunas transiciones CSS3 para que los cambios de posición en el: estado de desplazamiento sean animados. Finalmente, tenemos algunos pequeños cambios en las consultas de medios para que se vea un poco mejor en pantallas más pequeñas. Pero, obviamente, estos estilos cambiarán según su diseño.
jQuery
Entonces, como declaramos anteriormente, vamos a hacer un archivo llamado main.js en un directorio js . Dentro de eso, escribiremos nuestro jQuery que hace que la pantalla de inicio desaparezca en desplazamiento, o cuando haga clic en el enlace de flecha. Aquí está:
$(document).ready(function() {if($(".splash").is(":visible")) {$(".wrapper").css({"opacity":"0"} );} $ (". splash-arrow"). click (función () {$(".splash").slideUp("800", function() {$(".wrapper").delay(100).animate({"opacity":"1.0"} , 800);});});}); $ (ventana) .scroll (función () {$(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 ajustando nuestras primeras declaraciones dentro de una función lista para documentos , para tomar medidas solo cuando la página se haya cargado por completo. Entonces, para comenzar, verificamos si nuestra pantalla de inicio es visible. Si es así, hacemos que el envoltorio sea invisible (para que no tengamos flash de contenido mientras se carga la imagen de fondo, y también para hacer un desvanecimiento final en la animación una vez que llegamos a la página). Luego agregamos una función al manejador de clics en la flecha. Entonces, si el usuario hace clic en él, la pantalla de bienvenida se desliza hacia arriba (y por lo tanto desaparece) y luego animamos la opacidad de la envoltura de nuevo a 1.
Este pequeño bloque de código es (casi) el mismo que usaremos justo después en la función $. (Window) .scroll . Entonces, cuando el usuario se desplaza, deslizamos hacia arriba el splash, y esta vez lo 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 ("scroll"); eso impide que la ventana se desplace en realidad cuando no queremos. Cuando el usuario se desplaza por primera vez, queremos que solo active la animación y no se desplace la página. Pero una vez que la introducción se ha ido, la página se desplazará normalmente.
Conclusión
Así que ahí lo tienes, una solución muy simple (ligera) pero elegante para tener una pantalla de introducción agregada a la parte superior de tu sitio, y hacer que desaparezca en desplazamiento, o cuando el usuario haga clic en un elemento específico. Siéntase libre de tomar este código, usarlo y modificarlo para satisfacer sus necesidades.
Como mencioné al principio, esta técnica se puede usar de muchas maneras diferentes, ¡así que sea creativo!