Voulez-vous faire une entr\u00e9e dramatique? Vous voulez r\u00e9chauffer vos visiteurs avant de les impressionner avec vos animations \u00e9tonnantes, vos exp\u00e9riences de biblioth\u00e8que sophistiqu\u00e9es ou tout simplement un design intelligent ? Vous devriez donc probablement mettre vos yeux sur un \u00e9cran d’accueil.<\/p>\n
Issu du monde des logiciels de bureau, il \u00e9tait ancr\u00e9 dans la conception de sites Web. C’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 d\u00e8s le d\u00e9part. Et les \u00e9crans d’accueil sont l’un de ces composants d’application Web qui sont directement li\u00e9s au succ\u00e8s de cette mission.<\/p>\n
Beaucoup pensent que la zone des h\u00e9ros soutient la cr\u00e9ation de cette pr\u00e9cieuse premi\u00e8re impression. Cependant, il existe des artistes de code diligents et scrupuleux qui aiment marquer le i et traverser le t, croyant que chaque seconde compte. Eh bien, c’est comme \u00e7a.<\/p>\n
Plus t\u00f4t vous commencez \u00e0 augmenter votre audience en ligne, meilleure sera votre premi\u00e8re impression. C’est pourquoi nous assistons \u00e0 plusieurs solutions uniques 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 de bienvenue, tout l’\u00e9cran est \u00e0 votre disposition, pas seulement un petit \u00e9l\u00e9ment. C’est comme ouvrir des g\u00e9n\u00e9riques de films qui promettent au public quelque chose d’\u00e9tonnant, piquent leur int\u00e9r\u00eat.<\/p>\n
Three.js n’est pas un bon compagnon pour cr\u00e9er des pr\u00e9sentations rapides et l\u00e9g\u00e8res, cependant, dans le cas de Tedd Arcuri, cela fonctionne certainement. Ici, l’effet de fum\u00e9e tr\u00e8s r\u00e9aliste et habilement reproduit est utilis\u00e9 pour am\u00e9liorer l’apparence de la lettre \u00ab\u00a0T\u00a0\u00bb. Ce dernier est ici purement symbolique car il peut facilement \u00eatre transform\u00e9 en logo, mascotte ou titre.<\/p>\n
.<\/p>\n
La plupart des \u00e9crans de d\u00e9marrage vont de pair avec l’identit\u00e9 de la marque. Par exemple, la page d’accueil de Timothy Giblin. Il s’agit d’un \u00e9cran de d\u00e9marrage 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 en m\u00eame temps 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 amusante et cr\u00e9ative, rendant les choses beaucoup plus int\u00e9ressantes.<\/p>\n
Il existe des extraits de code plus int\u00e9ressants. Explorons ensemble la collection et trouvons celle qui convient le mieux \u00e0 votre prochain projet.<\/p>\n
Vous voulez adopter une approche plus \u00e9prouv\u00e9e de l’\u00e9cran d’accueil\u00a0? Les exemples suivants vous aideront \u00e0 y arriver.<\/p>\n
Un effet de glissi\u00e8re traditionnel sous-tend la beaut\u00e9 de la solution Adam Blum. Il comprend un arri\u00e8re-plan net et soign\u00e9 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 des utilisateurs.<\/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. Votre projet Play On pr\u00e9sente de belles transitions glissantes entre des \u00e9crans de superposition semi-transparents appliqu\u00e9s \u00e0 l’arri\u00e8re-plan de l’image. sympa 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 divers projets.<\/p>\n
L’\u00e9cran de d\u00e9marrage anim\u00e9 de 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 la pi\u00e8ce.<\/p>\n
D\u00e9couvrez 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 texte un \u00e0 un, accompagn\u00e9s d’un effet de fondu traditionnel. Cependant, il fait tout ce qu’il doit. Et, surtout, il le fait sans “consommer” vos pr\u00e9cieuses ressources, car il n’utilise que CSS3. C’est simple, \u00e9l\u00e9gant, modeste et l\u00e9ger.<\/p>\n
Les exemples suivants montrent qu’un \u00e9cran de d\u00e9marrage peut \u00e9galement \u00eatre utilis\u00e9 pour donner le ton d’un site Web \u00e0 partir de z\u00e9ro.<\/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 d\u00e9mod\u00e9, brutalement simple et s’int\u00e8gre parfaitement \u00e0 n’importe quel portefeuille de d\u00e9veloppeur personnel.<\/p>\n
Si vous avez un projet statistique ou ax\u00e9 sur les donn\u00e9es en t\u00eate, les chiffres d\u00e9croissants de Thibault Jan Beyer sont un bon d\u00e9but pour votre exp\u00e9rience de narration. L’animation s’ouvre avec des nombres d\u00e9croissants qui finissent par toucher le sol et ouvrir 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 geek de Bruce Lee”. Pour nous, il est une ic\u00f4ne derri\u00e8re un univers o\u00f9 le bien triomphe du mal, et qui restera \u00e0 jamais dans nos c\u0153urs.<\/p>\n
L’\u00e9cran de projection 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. Votre animation de bienvenue a une merveilleuse atmosph\u00e8re comique. C’est une r\u00e9plique d’une s\u00e9quence d’ouverture de films Marvel qui a l’air incroyable.<\/p>\n
Les \u00e9crans d’accueil peuvent \u00eatre utilis\u00e9s comme alternative aux chargeurs, \u00e0 moins, bien s\u00fbr, qu’ils soient lourds. Malheureusement, il y a encore des gens qui les prennent trop au s\u00e9rieux et essaient d’en faire une pi\u00e8ce pleine d’action.<\/p>\n
Les \u00e9crans de bienvenue dans la conception de sites Web sont efficaces tant qu’ils sont rapides, courts, l\u00e9gers et pr\u00e9cis. Bien s\u00fbr, ils proposent le plein \u00e9cran pour montrer leur g\u00e9nie. N\u00e9anmoins, vous devez continuer votre mission initiale. Ce sont des \u00e9claboussures qui devraient susciter l’int\u00e9r\u00eat et transformer imm\u00e9diatement la chauve-souris en une solution plus excitante.<\/p>\n