Dans les arrière-plans de conception Web modernes sont grands (au sens propre comme au figuré). Avec l’avènement des écrans HD (et maintenant 4K), les concepteurs créent des arrière-plans qui occupent de nombreuses surfaces d’écran. Pourquoi? Parce qu’ils ont un impact visuel incroyable et aident à raconter une histoire.

Mais les arrière-plans ne se limitent pas à jeter une photo ou une texture dans un grand espace. Une combinaison de CSS et le peu occasionnel de JavaScript permet de créer des effets spéciaux étonnants.

Explorons certaines des façons uniques dont les concepteurs pimentent les arrière-plans. Nous inclurons également un stylo pour chaque technique afin que vous puissiez voir exactement comment elles fonctionnent.

Changement de couleur du mode de fusion CSS

Ce qui rend cet effet d’arrière-plan si cool, c’est que l’élément fixe en haut semble changer de couleur lorsque l’utilisateur défile. L’utilisation de la propriété CSS mix-blend-mode permet le changement de teinte, qui dépend du contenu de l’arrière-plan.

Animation par défilement

Rappelant les jeux vidéo à défilement horizontal du passé, cette technique comporte deux images distinctes – chacune défilant dans la direction opposée. C’est fait avec l’aide de CSS transform et de certains JS.

Biaisé

Les arrière-plans biaisés sont l’une des tendances les plus en vogue de la conception de sites Web. C’est un effet incroyablement facile à mettre en œuvre dans la conception d’impression et une douleur à faire sur le Web – jusqu’à présent. Cette solution HTML / CSS pure en fait un jeu d’enfant.

Images animées

En utilisant un peu de CSS assez simple, cet arrière-plan permet une transition en douceur entre plusieurs images. Cela fait un curseur beaucoup plus léger que le JavaScript traditionnel.

Dégradé animé

S’il n’est pas fait avec soin, un arrière-plan animé peut distraire tout contenu assis dessus. Cet exemple de dégradé animé est agréable car c’est un effet plus subtil. En utilisant JavaScript, vous pouvez définir des couleurs dégradées pour correspondre à votre palette.

Flou sur le défilement

Cette technique pourrait être très utile pour les moments où vous voulez vraiment que les visiteurs se concentrent sur l’image d’arrière-plan (comme l’en-tête d’un article de presse), puis permettent la lecture facile du texte par-dessus. Un peu de jQuery modifie la propriété background-size lors du défilement pour créer l’effet.

Image de héros en fondu avec Superposition

Il se passe quelques choses avec cet exemple. Tout d’abord, une image de héros pleine largeur a une superposition de couleurs ajoutée sur le dessus pour créer une teinte différente. Ensuite, une animation de fondu est mise en œuvre pour introduire l’image de manière visuellement fluide. Enfin, un effet de défilement de style parallaxe est ajouté au mélange. Le résultat est un look très moderne qui utilise relativement peu de code (et pas de JS).

Zoom et panoramique en arrière-plan

Voici un effet que nous voyons un peu ces derniers temps. Lorsque l’utilisateur survole un panneau, l’image d’arrière-plan effectue un zoom avant et un panoramique avec tous les mouvements du curseur. C’est un moyen facile d’ajouter de l’interactivité et de maintenir l’intérêt des utilisateurs.

Reveal on Hover

Cet exemple montre un écran divisé où l’arrière-plan est révélé en fonction de la position de la souris de l’utilisateur. Idéal pour les comparaisons, comme les photos « avant » et « après ».

Changement de couleur au défilement

Parfois, nous oublions à quel point l’utilisation de simples couleurs unies peut être puissante. Ici, nous voyons l’impact que cela peut avoir lorsque les couleurs d’arrière-plan changent en fonction de la position du défilement. Cette solution légère peut être aussi efficace visuellement que des images lourdes.

Les arrière-plans au premier plan

Les arrière–plans ne sont plus seulement un moyen de cadrer le contenu – ils font maintenant souvent partie du contenu lui-même. Avec tant de façons intéressantes de les utiliser, il vaut la peine d’expérimenter diverses techniques de fond et de voir comment elles peuvent améliorer l’expérience utilisateur de votre prochain projet.