Aujourd'hui, nous allons nous amuser avec la fonctionnalité CSS de multiples arrière-plans. Vous apprendrez à utiliser plusieurs arrière-plans de manière simple et à aller beaucoup plus loin en combinant la technique avec des actions de survol et des transitions CSS pour créer des effets vraiment géniaux.
Suivez-nous pendant que nous codons cinq applications différentes de cette idée que vous pouvez copier et coller pour créer vos propres survols impressionnants.
Ce que nous construisons
Voici un aperçu de ce que nous allons créer aujourd'hui. Survolez les cercles et réfléchissez à la manière dont vous obtiendriez ces effets avec du CSS pur.
Démo: Cliquez ici pour lancer la démo.
Arrière-plans multiples
Jusqu'à récemment, je n'avais jamais vraiment joué avec l'utilisation de plusieurs images d'arrière-plan dans mon CSS. Je savais que la fonctionnalité existait mais je n'avais pas vraiment trouvé de moyen unique de l'utiliser. Les cieux nuageux de Parallax sont géniaux, mais tout le monde les fait et je ne voulais pas simplement suivre la foule.
La solution que j'ai proposée consistait à trouver de superbes effets de survol qui utiliseraient plusieurs arrière-plans pour créer une sorte d'animation d'ouverture. C'est un truc super facile mais je ne l'avais jamais vu auparavant, alors j'ai pensé vous montrer comment ça marche.
Il existe un million de façons différentes de l'utiliser. Aujourd'hui, nous construisons cinq versions différentes pour vous donner une idée de ce qui est possible.
Le concept
Votre animation de survol CSS typique est plutôt basique: une image glisse pour en révéler une autre, quelque chose tourne ou rebondit, les couleurs s'estompent et plus; vous avez eu l'idée.
Lorsque nous intégrons plusieurs contextes dans le scénario, nous avons tout à coup un certain nombre de variables avec lesquelles nous pouvons travailler. Avec très peu de configuration, nous pouvons créer des animations apparemment complexes en utilisant uniquement des transitions CSS, qui ont pour le moment une meilleure prise en charge du navigateur que les animations par images clés.
Par exemple, supposons que nous voulions avoir un effet d'ouverture. Nous pouvons animer deux images de fond dans des directions différentes et réaliser cette illusion avec facilité:
Maintenant que nous avons l'explication à l'écart. Passons à la partie amusante et commençons à créer nos effets de survol.
Portes coulissantes: horizontales
Prenons l'exemple hypothétique présenté ci-dessus et voyons si nous pouvons construire quelque chose qui utilise cet effet. Pour commencer, nous avons besoin de deux images de fond.
Puisque nous ne faisons que montrer une idée, peu importe les images que vous utilisez, assurez-vous simplement que l’une d’elles est une texture qui mosaïque. J'utiliserai la texture Dark Wood de Subtle Patterns et un pictogramme du WC gratuit Sold Out A Bta.
CSS de base
Créez une div vide en HTML et appliquez une classe qui utilise un style de base. Nous allons appliquer cette classe à chacun des exemples que nous construisons aujourd'hui.
J'en jetterai beaucoup dans un seul document, donc quelques styles de mise en page, mais le plus important ici est le rayon de la bordure défini sur la moitié de la hauteur / largeur, ce qui nous donnera un joli cercle.
Nos images de fond seront empilées, mais ici, elles sont réparties avec le rayon de bordure appliqué.
Application de plusieurs images d'arrière-plan
La première chose que nous allons faire est d’appliquer les deux images d’arrière-plan, mais en tant que boule courbe, nous allons utiliser deux fois la texture du bois pour un total de trois applications d’image d’arrière-plan.
L’application de plusieurs images d’arrière-plan en CSS est aussi simple que possible: appliquez-en une comme d’habitude, ajoutez une virgule et appliquez-en une autre.
Ces images auront un ordre d'empilement naturel qui correspond à l'ordre dans lequel vous les listez: la première étant l'image en haut et la dernière en bas.
Vous pouvez positionner les arrière-plans avec un raccourci, mais pour cet exemple, je pense qu'il est préférable de séparer les éléments pour faciliter les choses aux lecteurs. Dans cet esprit, nous jetterons dans position de fond propriété afin que nous puissions déplacer nos images en place.
Évidemment, chaque ensemble de valeurs de positionnement est corrélé à l'une des images que nous avons appliquées. La première valeur de chaque ensemble déplace l'image vers la droite (valeur positive) et vers la gauche (valeur négative) et la deuxième valeur la déplace vers le haut (valeur positive) et vers le bas (valeur négative).
Comme vous pouvez le constater, j'ai divisé le cercle en deux, de sorte qu'une image de l'image du bois se trouve à gauche et l'autre à droite, l'image de la voiture étant placée au centre.
Cela semble fou de positionner les images de bois comme ceci, car vous pouvez en utiliser une, mais cela nous permettra de faire une belle animation.
Animation des images
Maintenant, puisque nous pouvons déplacer chacune de ces images d’arrière-plan indépendamment, nous pouvons obtenir des résultats assez intéressants si nous appliquons des transitions.
Pour le configurer, nous intégrons tous les préfixes du navigateur et créons une transition simple d’une durée maximale d’une seconde. Ensuite, nous avons mis en place un sélecteur de survol qui déplace le fond de bois gauche plus à gauche et le fond de bois droit plus à droite.
Avec cela, nous avons terminé avec le premier exemple. Maintenant, lorsque vous passez la souris sur le cercle en bois, les portes s'ouvrent pour révéler l'image en dessous.
Portes coulissantes: verticales
Maintenant que nous en avons un exemple, changer cet effet est un jeu d'enfant. Ici, nous utilisons les mêmes transitions CSS et images de fond, la seule chose qui change est le positionnement des deux images de texture de bois. Cette fois, nous les empilons les uns sur les autres et les déplaçons de haut en bas à mesure que l'utilisateur survole.
Break Apart: Squared
Intensifons un peu les choses et utilisons un total de cinq images pour la transition. Fondamentalement, lorsque vous survolez le cercle, l’image se scinde en quatre parties et disparaît.
Nous alignons les quatre images du haut de manière à ce qu'elles se rencontrent verticalement et horizontalement au centre du cercle. Ensuite, en vol stationnaire, nous bougeons chacun vers le haut
Break Apart: Arrondi
La répétition de ces effets avec une image arrondie est un peu plus délicate car, d’une part, vous devez utiliser des fichiers PNG transparents et, d’autre part, vous devez faire en sorte que les images se chevauchent dans l’état par défaut. Cette dernière cause des problèmes compliqués lors de la création de textures, mais si vous utilisez quelque chose comme une texture de bruit simple, c'est assez facile.
Twist and Shout
Celui-ci est difficile à comprendre l'essentiel de la photo ci-dessus. En gros, c'est la même chose que la transition cassée ci-dessus, à ceci près que j'ai ajouté l'élément supplémentaire d'une rotation qui se produit avant que les images ne se séparent et révèlent ce qu'il y a en dessous.
Cela implique quelques bizarreries. Le problème avec la rotation est qu’elle fait pivoter toutes les images d’arrière-plan, y compris la voiture située en dessous. Pour tenir compte de cela, j'ai déjà fait pivoter la voiture afin que la rotation de transition la mette bien en place. Vous apercevez la voiture pendant la rotation, mais cela ne fait qu'ajouter à l'effet.
Une autre chose intéressante est le timing des transitions. Notez que je mets en fait des durées différentes sur les transitions en rotation et en mouvement. Cela montre à quel point cette idée est incroyablement complexe.
Jetez un autre regard
Maintenant que vous avez vu le code, relisez la démo pour voir ces techniques en action.
Démo: Cliquez ici pour lancer la démo.
Conclusion
Le but de cet article était de vous amener à penser au-delà des effets de parallaxe pour savoir comment appliquer plusieurs arrière-plans de manière intéressante.
Laissez un commentaire et laissez-nous savoir ce que vous pensez des exemples ci-dessus. Avez-vous fait quelque chose avec plusieurs images de fond? Nous voulons le voir!