Voulez-vous faire une entr\u00e9e spectaculaire? Voulez-vous r\u00e9chauffer vos visiteurs avant de les \u00e9pater avec ses animations incroyables, des exp\u00e9riences de biblioth\u00e8que haut de gamme ou tout simplement une conception intelligente? Ensuite, vous devriez probablement mettre vos yeux sur un \u00e9cran de d\u00e9marrage.<\/p>\n
Issu du monde des logiciels de bureau, il s’est enracin\u00e9 avec succ\u00e8s dans la conception web. Il est rapide, rapide, l\u00e9ger, relativement simple et puissant. Nous parlons toujours de la fa\u00e7on dont les premi\u00e8res secondes peuvent faire une grande diff\u00e9rence. Tout doit \u00eatre parfait depuis le d\u00e9but. Et les \u00e9crans d’accueil font partie de ces composants d’application Web qui sont directement li\u00e9s au succ\u00e8s de cette mission.<\/p>\n
La plupart des gens pensent que la zone des h\u00e9ros soutient la cr\u00e9ation de cette pr\u00e9cieuse premi\u00e8re 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 \u00e7a.<\/p>\n
Plus t\u00f4t vous augmenterez votre audience en ligne, meilleure sera votre premi\u00e8re impression. C’est pourquoi nous assistons \u00e0 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\u00e9 de montrer votre cr\u00e9ativit\u00e9, les \u00e9crans de d\u00e9marrage ont certainement un certain potentiel.<\/p>\n
Avec une animation bienvenue, tout l’\u00e9cran est \u00e0 votre service, pas seulement un petit \u00e9l\u00e9ment. Ils sont comme l’ouverture de s\u00e9quences de cr\u00e9dit de films qui promettent au public quelque chose d’incroyable, suscitant un int\u00e9r\u00eat.<\/p>\n
Three.js n’est pas un bon compagnon pour cr\u00e9er des introductions rapides et l\u00e9g\u00e8res, mais dans le cas de Tedd Arcuri, cela fonctionne certainement. Ici, l’effet de fum\u00e9e hautement r\u00e9aliste et habilement reproduit est utilis\u00e9 pour am\u00e9liorer l’apparence de la lettre “T”. Ce dernier est purement symbolique ici car il peut \u00eatre facilement chang\u00e9 en logo, mascotte ou titre.<\/p>\n
.<\/p>\n
La plupart des \u00e9crans de pr\u00e9sentation vont de pair avec l’identit\u00e9 de la marque. Par exemple, la page Splash de Timothy Giblin. Il s’agit d’un \u00e9cran de pr\u00e9sentation 100% classique qui pr\u00e9sente une identit\u00e9 de marque enrichie de la pens\u00e9e cr\u00e9ative d’un artiste. L’auteur nous montre comment adh\u00e9rer au m\u00e9dium dor\u00e9. Son concept est original et \u00e0 la fois modeste. D\u00e9couvrez un seul logo, mais cette d\u00e9couverte attire l’attention.<\/p>\n
Cet exemple est moins impressionnant que la solution de Timothy Giblin, mais il est plus pratique et peut \u00eatre vu partout de nos jours. Essentiellement, c’est juste une charge paresseuse port\u00e9e au niveau suivant. R\u00e9v\u00e9lez les \u00e9l\u00e9ments de la page d’accueil un par un de mani\u00e8re ludique et cr\u00e9ative, ce qui rend les choses beaucoup plus int\u00e9ressantes.<\/p>\n
Il existe des extraits de code plus int\u00e9ressants. Explorons ensemble la collection et trouvons la meilleure ad\u00e9quation pour votre prochain projet.<\/p>\n
Voulez-vous utiliser une approche plus \u00e9prouv\u00e9e sur votre \u00e9cran d’accueil? Les exemples suivants vous aideront \u00e0 y arriver.<\/p>\n
Un effet coulissant traditionnel sous-tend la beaut\u00e9 de la solution Adam Blum. Il comprend un fond propre et pur et plusieurs phrases cl\u00e9s qui apparaissent les unes apr\u00e8s les autres. Exploitez le pouvoir de l’anticipation – le moyen primitif mais viable de susciter l’int\u00e9r\u00eat d’un utilisateur.<\/p>\n
Pour rendre la solution ci-dessus un peu plus int\u00e9ressante, vous pouvez ajouter des manipulations avec un arri\u00e8re-plan comme Niranjan l’a fait dans ce stylo. Son projet Play On propose de belles transitions coulissantes entre des \u00e9crans de superposition semi-transparents appliqu\u00e9s \u00e0 l’arri\u00e8re-plan de l’image. Agr\u00e9able et amusant<\/p>\n
My Splash de Williams est un autre exemple repr\u00e9sentatif d’un \u00e9cran de d\u00e9marrage classique. Le concept comporte deux \u00e9tapes. Dans un premier temps, l’animation r\u00e9v\u00e8le la signature de l’auteur \u00e0 un rythme mod\u00e9r\u00e9 et confortable. Un \u00e9cran noir appara\u00eet alors. Il s’agit d’une solution \u00e9l\u00e9gante, \u00e9l\u00e9gante et professionnelle qui s’adapte \u00e0 de nombreux projets.<\/p>\n
\u00c9cran de d\u00e9marrage anim\u00e9 par Dmytro Lvivsky est un point de d\u00e9part id\u00e9al pour cr\u00e9er votre propre solution. L’animation JavaScript a plusieurs \u00e9crans et une transition traditionnelle entre chacun. Ce dernier est bas\u00e9 sur un effet dans lequel un cercle m\u00e8ne le jeu.<\/p>\n
Voir l’\u00e9cran d’accueil anim\u00e9 de plumes de Dmytro Lvivsky (@UnforbiddenYet) sur CodePen.<\/p>\n
Voici une solution incroyablement simplifi\u00e9e. La routine consiste \u00e0 afficher des blocs de textes un par un, accompagn\u00e9s 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\u00e9cieuses ressources car il utilise uniquement CSS3. Il est simple, \u00e9l\u00e9gant, modeste et l\u00e9ger.<\/p>\n
Les exemples suivants montrent qu’un \u00e9cran d’accueil peut \u00e9galement \u00eatre utilis\u00e9 pour d\u00e9finir le ton d’un site Web d\u00e8s le d\u00e9part.<\/p>\n
Par exemple, si vous \u00eates un encodeur, l’animation de chargement de la console d’Andrew Tunnecliffe cr\u00e9era une atmosph\u00e8re appropri\u00e9e. C’est old-school, brutalement simple, et va parfaitement avec n’importe quel portefeuille de d\u00e9veloppeur personnel.<\/p>\n
Si vous avez un projet bas\u00e9 sur des statistiques ou bas\u00e9 sur des donn\u00e9es, Falling Numbers de Thibault Jan Beyer est un bon d\u00e9but pour votre exp\u00e9rience narrative. L’animation s’ouvre avec des nombres d\u00e9croissants qui finissent par toucher le sol et ouvrent l’\u00e9cran principal. Il a un charme g\u00e9om\u00e9trique enrichi de quelques \u00e9pices num\u00e9riques.<\/p>\n
Pour beaucoup de gens, Stan Lee sera toujours “le fr\u00e8re ringard de Bruce Lee”. Pour nous, c’est une ic\u00f4ne qui \u00e9tait derri\u00e8re un univers o\u00f9 le bien triomphe du mal, et qui restera dans nos c\u0153urs pour toujours.<\/p>\n
L’\u00e9cran Splash Marvel de Matt Feinstein n’est pas exactement un hommage, mais tous les fans de super-h\u00e9ros l’appr\u00e9cieront. Le titre parle de lui-m\u00eame. Son animation de bienvenue d\u00e9gage une merveilleuse atmosph\u00e8re comique. C’est une r\u00e9plique d’une s\u00e9quence d’ouverture pour les films Marvel qui a l’air incroyable.<\/p>\n
Les \u00e9crans de bienvenue peuvent \u00eatre utilis\u00e9s comme alternative aux chargeurs, sauf s’ils sont bien s\u00fbr lourds. Malheureusement, il y a encore des gens qui les prennent trop au s\u00e9rieux et essaient de les transformer en une partie bourr\u00e9e d’action d’une pi\u00e8ce.<\/p>\n
Les \u00e9crans d’accueil dans la conception Web sont efficaces tant qu’ils sont rapides, courts, l\u00e9gers et directs. Bien s\u00fbr, ils vous donnent le plein \u00e9cran pour montrer votre g\u00e9nie. Pourtant, vous devez continuer votre mission d’origine. Ce sont des \u00e9claboussures qui devraient susciter l’int\u00e9r\u00eat et transformer imm\u00e9diatement le relais en une solution plus excitante.<\/p>\n