4 astuces d'arrière-plan modernes à essayer
Il semble que, en tant que composant d'un dessin, les arrière-plans vivent dans l'ombre; Cependant, ce n'est pas tout à fait vrai. À une époque où le CSS ne faisait que faire ses premiers pas vers la conquête du monde, le rôle de l'élément principal de la décoration sur le site avait déjà pris forme.
Aujourd'hui, la situation n'a pas radicalement changé. Dans la plupart des cas, il sert de force motrice visuelle primaire qui apporte une contribution importante au thème général.
Traditionnellement, les photos et les vidéos sont les premiers choix pour une toile de fond. Le fait est qu’il s’agit simplement de sections de héros surpeuplées: tous les autres sites Web accueillent l’audience en ligne avec un arrière-plan basé sur l’image ou sur un film. Et cela rend le Web (et votre interface en particulier) assez semblable, ce qui se traduit par une expérience utilisateur anticipée.
Une solution consiste à trouver de nouvelles solutions en exploitant les nouvelles techniques et en jouant avec CSS3, HTML5 et JavaScript. En fait, il existe une tendance évidente à opter pour ces options. Il existe au moins quatre milieux dynamiques modernes différents qui participent à un concours pour gagner sa place au soleil ces jours-ci.
Regardons-les:
Animation de particules
L'animation de particules est l'un des choix les plus populaires en ce moment. De nombreux sites Web ont adopté avec succès cette solution élégante inspirée du cosmos. Cela fonctionne bien en combinaison avec la toile pleine de couleur unie, l'illustration, les dessins vectoriels et même les photos.
De plus, l'animation varie. Il peut s'agir d'un ensemble de points en mouvement chaotique dispersés sur toute la page pour imiter le ciel étoilé ou la pluie d'étoiles, ou une solution sur le thème de la constellation où vous pouvez connecter des cercles avec des lignes fines. Et ce n'est pas tout; Parfois, il est associé aux effets déclenchés par les événements de survol de la souris: dans ce cas, vous pouvez éliminer les particules, former des tourbillons à partir de ceux-ci, les attacher au curseur sous forme de chemin, etc.
Huub est un exemple de l'animation typique des particules. Il comporte un groupe de points net qui se déplace parfaitement avec une couleur sombre et une carte placée à l’arrière. Utilisez le curseur de votre souris pour vous amuser.
Astuce: Si vous voulez vous familiariser avec le fond d’entête dynamique de Huub, vous devriez jeter un coup d’œil au projet créé par Dominic Kolbe intitulé démo de parallaxe de la souris . C'est presque pareil. Mais si vous avez besoin d'une solution immédiate, alors la bibliothèque JavaScript de Vincent Garreau s'appelle Particles.js est ce que vous recherchez.
Vagues de particules
Considérant que dans l'exemple précédent, l'effet peut être obtenu avec les manipulations intelligentes avec HTML5 et CSS3 et une pincée de magie JavaScript, celle-ci est une expérience ingénieuse avec la bibliothèque Three.js. Avec ses formes arquées et ses mouvements ondulés, il rappelle facilement les petites marées. Cela crée une sensation de toile respiratoire. Vous pouvez utiliser le curseur de la souris pour le faire pivoter dans différentes directions, l'explorer à la fois horizontalement et verticalement.
StuurMen a une section "bienvenue" simple et raffinée. C'est minimal, propre et exquis. Le contenu pénètre discrètement dans le champ de vision tandis que l'arrière-plan palpitant crée l'ambiance appropriée pour le projet.
Astuce: Ici vous pouvez trouver un script original de ThreeJS et son adaptation réussie par Deathfang avec une démo appelée three.js canvas - Particules - Vagues .
Souris en vol stationnaire
La parallaxe en couches est une autre tendance croissante. Avec l'animation de particules, il peut transformer un arrière-plan statique terne en une composition au subtil effet 3D. La bonne chose est que vous n'avez pas à abandonner votre choix d'image préféré, utilisez simplement la parallaxe pour l'améliorer un peu.
Il est très utile d’animer le titre, le logotype, la scène surréaliste ou l’illustration. Il convient également à diverses animations abstraites. Déclenché par un événement de survol de souris standard, il ajoute non seulement une autre dimension, mais permet également aux utilisateurs de jouer avec l’environnement.
Le portfolio personnel de Alexandre Rochet a une page de démarrage exceptionnelle. Non seulement le comportement attire-t-il l'attention, mais la parallaxe du survol de la souris entraîne également le décalage des lettres.
Astuce: il existe de nombreuses bibliothèques et extraits de code viables pour générer la parallaxe. L'un des plus populaires est un plugin créé par Matthew Wagerfield appelé Parallax.js . Cependant, si vous avez besoin de le voir dans la pratique, en particulier en ce qui concerne la typographie, alors vous pouvez explorer un stylo de Frontnerd qui présente sa Parallaxe 3D sur la souris .
Expériences WebGL
Les expériences WebGL sont, bien entendu, une variante pour les développeurs avertis et les clients disposant d’un budget généreux. Ils peuvent être brillants, impressionnants et un peu pompeux. Cela vaut chaque centime. Cependant, il y a toujours une mouche dans la pommade. Avec une grande puissance, il y a une grande responsabilité, et avec WebGL, vous ne devez jamais oublier la quantité de ressources qu'elle consomme et l'absence de compatibilité totale du navigateur.
Solarin est une expérience utilisateur inoubliable et hallucinante. Il s’agit d’une expérience 3D WebGL riche en nombreuses fonctionnalités intéressantes et innovantes. L'arrière-plan de l'en-tête est une énorme sphère futuriste qui répond au curseur de la souris et crée une impression considérable.
Astuce: Bien que imiter les génies de MediaMonks soit compliqué, sur le Web, vous pouvez toujours trouver un point de départ qui vous donnera matière à réflexion. Prendre en compte API WebGL , et ce codepen de Yoichi Kobayashi qui a proposé un projet appelé "La sphère tortillante" .
Conclusion
Alors que l'utilisation d'images et de vidéos est un moyen éprouvé et moins douloureux de préciser le contexte, il existe encore d'autres options prometteuses et expérimentales susceptibles d'obtenir le résultat souhaité. Rester loin des banalités est difficile et même coûteux, mais ces mesures sont justifiées et assez raisonnables.
Qu'il s'agisse d'une animation de particules simple mais élégante ou d'une expérience WebGL remarquable, elle insuffle une nouvelle vie à un détail essentiel de l'interface, donnant à votre site Web une longueur d'avance.