10 ejemplos dram√°ticos de pantallas de bienvenida en dise√Īo web

¬ŅQuieres hacer una entrada dram√°tica? ¬ŅDesea calentar a los visitantes antes de sorprenderlos con sus asombrosas animaciones, experimentos con bibliotecas de alta gama o simplemente un dise√Īo ingenioso? Entonces probablemente deber√≠as poner tus ojos en una pantalla de bienvenida.

Procedente del mundo del software de escritorio, ha logrado arraigarse con √©xito en el dise√Īo web. Es r√°pido, r√°pido, ligero, relativamente simple y potente. Siempre hablamos de c√≥mo los primeros segundos pueden marcar una gran diferencia. Todo debe ser perfecto desde el principio. Y las pantallas de bienvenida son uno de esos componentes de la aplicaci√≥n web que est√°n directamente vinculados al √©xito de esta misi√≥n.

La mayoría por ahí piensa que el área del héroe respalda la creación de esta preciosa primera impresión. Sin embargo, hay artistas de códigos escrupulosos y diligentes que adoran puntear las i y cruzar las t, creyendo que cada segundo cuenta. Bueno, así son las cosas.

Cuanto antes comience a aumentar su audiencia en l√≠nea, mejor ser√° la primera impresi√≥n que har√°. Es por eso que estamos presenciando varias soluciones originales en este campo. De hecho y de hecho abren la conversaci√≥n entre el sitio web y la audiencia. Y si cree que un cargador no tiene la capacidad de mostrar su creatividad, entonces las pantallas de bienvenida ciertamente tienen alg√ļn potencial.

Hacer uso de la pantalla completa

Con una animaci√≥n de bienvenida, toda la pantalla est√° a su servicio, no solo un elemento peque√Īo. Son como secuencias de cr√©dito de apertura de pel√≠culas que prometen al p√ļblico algo incre√≠ble, lo que enciende el inter√©s.

SmokeT de Tedd Arcuri

Three.js no es un buen compa√Īero para crear introducciones r√°pidas y livianas, sin embargo, en el caso de Tedd Arcuri, ciertamente funciona. Aqu√≠ el efecto de humo altamente realista y reproducido h√°bilmente se utiliza para mejorar la apariencia de la letra “T”. Este √ļltimo es puramente simb√≥lico aqu√≠, ya que se puede cambiar f√°cilmente a un logotipo, mascota o t√≠tulo.

.

P√°gina de bienvenida de Timothy Giblin

La mayoría de las pantallas de presentación van de la mano con la identidad de la marca. Por ejemplo, la página Splash de Timothy Giblin. Es una pantalla de presentación 100% clásica que presenta una identidad de marca enriquecida con el pensamiento creativo de un artista. El autor nos muestra cómo adherirnos al medio dorado. Su concepto es original y al mismo tiempo modesto. Descubre solo un logotipo, pero este descubrimiento llama la atención.

Animación de pantalla de bienvenida por Hitesh Sahu

Este ejemplo es menos impresionante que la solución de Timothy Giblin, sin embargo, es más práctico y se puede ver en todas partes en estos días. En esencia, es solo una carga perezosa llevada al siguiente nivel. Revela los elementos de la página de inicio uno por uno de forma juguetona y creativa, haciendo las cosas mucho más interesantes.

Hay algunos fragmentos de código más interesantes. Exploremos la colección juntos y encontremos la mejor combinación para su próximo proyecto.

Soluciones cl√°sicas

¬ŅDesea utilizar un enfoque m√°s probado en su pantalla de inicio? Los siguientes ejemplos lo ayudar√°n a llegar all√≠.

Pantalla de bienvenida de Adam Blum

Un efecto deslizante tradicional respalda la belleza de la solución de Adam Blum. Incluye un fondo limpio y puro y varias frases clave que aparecen una tras otra. Aprovecha el poder de la anticipación: la forma primitiva pero viable de despertar el interés de un usuario.

Play On de Nirajan

Para que la solución anterior sea un poco más interesante, puede agregar manipulaciones con un fondo como lo hizo Niranjan en este bolígrafo. Su proyecto Play On presenta hermosas transiciones deslizantes entre las pantallas de superposición semitransparentes aplicadas al fondo de la imagen. Agradable y divertido

My Splash de Williams

My Splash de Williams es otro ejemplo representativo de una pantalla de presentación clásica. El concepto tiene dos etapas. Al principio, la animación revela la firma del autor a un ritmo moderado y cómodo. Luego, aparece una pantalla en negro. Esta es una solución elegante, elegante y profesional que se adapta a numerosos proyectos.

Pantalla animada de bienvenida de Dmytro Lvivsky

Animated Splash Screen de Dmytro Lvivsky es un punto de partida perfecto para crear tu propia soluci√≥n. La animaci√≥n con JavaScript tiene varias pantallas y una transici√≥n tradicional entre cada una. Este √ļltimo se basa en un efecto en el que un c√≠rculo lidera la jugada.

Vea la pantalla de bienvenida animada de la pluma de Dmytro Lvivsky (@UnforbiddenYet) en CodePen.

Desvanecimiento CSS3 simple por Giles Papworth

Aqu√≠ hay una soluci√≥n incre√≠blemente simplificada. La rutina consiste en mostrar bloques de textos uno por uno, acompa√Īados de un efecto de desvanecimiento tradicional. Sin embargo, hace todo lo que deber√≠a. Y, lo m√°s importante, lo hace sin “comer” sus recursos preciosos porque solo usa CSS3. Es simple, elegante, modesto y ligero.

El humorista

Los siguientes ejemplos muestran que una pantalla de inicio también se puede utilizar para establecer el tono de un sitio web desde el primer momento.

Consola cargando animación por Andrew Tunnecliffe

Por ejemplo, si usted es un codificador, la animación de carga de la consola de Andrew Tunnecliffe establecerá una atmósfera adecuada. Es de la vieja escuela, es brutalmente simple y combina perfectamente con cualquier cartera personal para un desarrollador.

Falling Numbers por Thibault Jan Beyer

Si tiene en mente un proyecto basado en estad√≠sticas o basado en datos, Falling Numbers de Thibault Jan Beyer es un buen comienzo para su experiencia narrativa. La animaci√≥n se abre con n√ļmeros descendentes que eventualmente tocan el suelo y abren la pantalla principal. Tiene un encanto geom√©trico enriquecido con algunas especias digitales.

Por √ļltimo, si bien no menos importante

Para muchas personas, Stan Lee siempre ser√° el “hermano nerd de Bruce Lee”. Para nosotros, √©l es un √≠cono que estaba detr√°s de un universo donde el bien triunfa sobre el mal, y que estar√° en nuestros corazones para siempre.

Marvel Splash Screen de Matt Feinstein

Marvel Splash Screen de Matt Feinstein no es un tributo exactamente, pero todos los fanáticos de los superhéroes lo disfrutarán. El título habla por sí mismo. Su animación de bienvenida tiene un maravilloso ambiente de cómic. Es una réplica de una secuencia de apertura para películas de Marvel que se ve increíble.

Cómo hacer un chapoteo

Las pantallas de bienvenida se pueden usar como una alternativa a los cargadores, a menos que, por supuesto, sean pesadas. Desafortunadamente, todavía hay personas que los toman demasiado en serio y tratan de transformarlos en una parte llena de acción de una obra.

Las pantallas de bienvenida en el dise√Īo web son efectivas siempre que sean r√°pidas, cortas, livianas y directas al punto. Por supuesto, te dan la pantalla completa para mostrar tu genio. A√ļn as√≠, debes seguir con su misi√≥n original. Son salpicaduras que deber√≠an despertar inter√©s e inmediatamente pasar el testigo a una soluci√≥n m√°s emocionante.