Comment créer un site Web ou un blog en 2020 - Guide gratuit et facile pour créer un site Web

10 exemples spectaculaires d’√©crans de d√©marrage dans la conception Web

Voulez-vous faire une entrée spectaculaire? Voulez-vous réchauffer vos visiteurs avant de les épater avec ses animations incroyables, des expériences de bibliothèque haut de gamme ou tout simplement une conception intelligente? Ensuite, vous devriez probablement mettre vos yeux sur un écran de démarrage.

Issu du monde des logiciels de bureau, il s’est enracin√© avec succ√®s dans la conception web. Il est rapide, rapide, l√©ger, relativement simple et puissant. Nous parlons toujours de la fa√ßon dont les premi√®res secondes peuvent faire une grande diff√©rence. Tout doit √™tre parfait depuis le d√©but. Et les √©crans d’accueil font partie de ces composants d’application Web qui sont directement li√©s au succ√®s de cette mission.

La plupart des gens pensent que la zone des h√©ros soutient la cr√©ation de cette pr√©cieuse premi√®re impression. Cependant, il y a des artistes de code diligents et scrupuleux qui aiment pointer les i et traverser les t, croyant que chaque seconde compte. Eh bien, c’est comme √ßa.

Plus t√īt vous augmenterez votre audience en ligne, meilleure sera votre premi√®re impression. C’est pourquoi nous assistons √† plusieurs solutions originales dans ce domaine. En fait et en fait, ils ouvrent la conversation entre le site Web et le public. Et si vous pensez qu’un chargeur n’a pas la capacit√© de montrer votre cr√©ativit√©, les √©crans de d√©marrage ont certainement un certain potentiel.

Profitez du plein écran

Avec une animation bienvenue, tout l’√©cran est √† votre service, pas seulement un petit √©l√©ment. Ils sont comme l’ouverture de s√©quences de cr√©dit de films qui promettent au public quelque chose d’incroyable, suscitant un int√©r√™t.

Tedd Arcuri SmokeT

Three.js n’est pas un bon compagnon pour cr√©er des introductions rapides et l√©g√®res, mais dans le cas de Tedd Arcuri, cela fonctionne certainement. Ici, l’effet de fum√©e hautement r√©aliste et habilement reproduit est utilis√© pour am√©liorer l’apparence de la lettre “T”. Ce dernier est purement symbolique ici car il peut √™tre facilement chang√© en logo, mascotte ou titre.

.

Page d’accueil de Timothy Giblin

La plupart des √©crans de pr√©sentation vont de pair avec l’identit√© de la marque. Par exemple, la page Splash de Timothy Giblin. Il s’agit d’un √©cran de pr√©sentation 100% classique qui pr√©sente une identit√© de marque enrichie de la pens√©e cr√©ative d’un artiste. L’auteur nous montre comment adh√©rer au m√©dium dor√©. Son concept est original et √† la fois modeste. D√©couvrez un seul logo, mais cette d√©couverte attire l’attention.

Animation d’√©cran de bienvenue par Hitesh Sahu

Cet exemple est moins impressionnant que la solution de Timothy Giblin, mais il est plus pratique et peut √™tre vu partout de nos jours. Essentiellement, c’est juste une charge paresseuse port√©e au niveau suivant. R√©v√©lez les √©l√©ments de la page d’accueil un par un de mani√®re ludique et cr√©ative, ce qui rend les choses beaucoup plus int√©ressantes.

Il existe des extraits de code plus intéressants. Explorons ensemble la collection et trouvons la meilleure adéquation pour votre prochain projet.

Solutions classiques

Voulez-vous utiliser une approche plus √©prouv√©e sur votre √©cran d’accueil? Les exemples suivants vous aideront √† y arriver.

√Čcran d’accueil d’Adam Blum

Un effet coulissant traditionnel sous-tend la beaut√© de la solution Adam Blum. Il comprend un fond propre et pur et plusieurs phrases cl√©s qui apparaissent les unes apr√®s les autres. Exploitez le pouvoir de l’anticipation – le moyen primitif mais viable de susciter l’int√©r√™t d’un utilisateur.

Nirajan Play On

Pour rendre la solution ci-dessus un peu plus int√©ressante, vous pouvez ajouter des manipulations avec un arri√®re-plan comme Niranjan l’a fait dans ce stylo. Son projet Play On propose de belles transitions coulissantes entre des √©crans de superposition semi-transparents appliqu√©s √† l’arri√®re-plan de l’image. Agr√©able et amusant

Mon Splash de Williams

My Splash de Williams est un autre exemple repr√©sentatif d’un √©cran de d√©marrage classique. Le concept comporte deux √©tapes. Dans un premier temps, l’animation r√©v√®le la signature de l’auteur √† un rythme mod√©r√© et confortable. Un √©cran noir appara√ģt alors. Il s’agit d’une solution √©l√©gante, √©l√©gante et professionnelle qui s’adapte √† de nombreux projets.

√Čcran d’accueil anim√© de Dmytro Lvivsky

√Čcran de d√©marrage anim√© par Dmytro Lvivsky est un point de d√©part id√©al pour cr√©er votre propre solution. L’animation JavaScript a plusieurs √©crans et une transition traditionnelle entre chacun. Ce dernier est bas√© sur un effet dans lequel un cercle m√®ne le jeu.

Voir l’√©cran d’accueil anim√© de plumes de Dmytro Lvivsky (@UnforbiddenYet) sur CodePen.

Décoloration CSS3 simple par Giles Papworth

Voici une solution incroyablement simplifi√©e. La routine consiste √† afficher des blocs de textes un par un, accompagn√©s d’un effet de fondu traditionnel. Cependant, il fait tout ce qu’il faut. Et, plus important encore, il le fait sans “manger” vos pr√©cieuses ressources car il utilise uniquement CSS3. Il est simple, √©l√©gant, modeste et l√©ger.

L’humoriste

Les exemples suivants montrent qu’un √©cran d’accueil peut √©galement √™tre utilis√© pour d√©finir le ton d’un site Web d√®s le d√©part.

Animation de chargement de la console par Andrew Tunnecliffe

Par exemple, si vous √™tes un encodeur, l’animation de chargement de la console d’Andrew Tunnecliffe cr√©era une atmosph√®re appropri√©e. C’est old-school, brutalement simple, et va parfaitement avec n’importe quel portefeuille de d√©veloppeur personnel.

Falling Numbers par Thibault Jan Beyer

Si vous avez un projet bas√© sur des statistiques ou bas√© sur des donn√©es, Falling Numbers de Thibault Jan Beyer est un bon d√©but pour votre exp√©rience narrative. L’animation s’ouvre avec des nombres d√©croissants qui finissent par toucher le sol et ouvrent l’√©cran principal. Il a un charme g√©om√©trique enrichi de quelques √©pices num√©riques.

Enfin et surtout

Pour beaucoup de gens, Stan Lee sera toujours “le fr√®re ringard de Bruce Lee”. Pour nous, c’est une ic√īne qui √©tait derri√®re un univers o√Ļ le bien triomphe du mal, et qui restera dans nos cŇďurs pour toujours.

√Čcran de d√©marrage Marvel de Matt Feinstein

L’√©cran Splash Marvel de Matt Feinstein n’est pas exactement un hommage, mais tous les fans de super-h√©ros l’appr√©cieront. Le titre parle de lui-m√™me. Son animation de bienvenue d√©gage une merveilleuse atmosph√®re comique. C’est une r√©plique d’une s√©quence d’ouverture pour les films Marvel qui a l’air incroyable.

Comment faire sensation

Les √©crans de bienvenue peuvent √™tre utilis√©s comme alternative aux chargeurs, sauf s’ils sont bien s√Ľr lourds. Malheureusement, il y a encore des gens qui les prennent trop au s√©rieux et essaient de les transformer en une partie bourr√©e d’action d’une pi√®ce.

Les √©crans d’accueil dans la conception Web sont efficaces tant qu’ils sont rapides, courts, l√©gers et directs. Bien s√Ľr, ils vous donnent le plein √©cran pour montrer votre g√©nie. Pourtant, vous devez continuer votre mission d’origine. Ce sont des √©claboussures qui devraient susciter l’int√©r√™t et transformer imm√©diatement le relais en une solution plus excitante.