Les animations CSS en plusieurs étapes sont faciles avec les images clés, mais que faire si nous voulons utiliser des transitions simples et anciennes pour obtenir un effet similaire? De plus, comment pouvons-nous convertir un événement en survol unique en plusieurs animations sur différents éléments?
La solution réside dans l'utilisation de survols enterrés, une astuce simple et efficace que vous devez absolument essayer.
Inspiré par les événements réels
Chris Coyier de CSS-Tricks sert plus souvent d'inspiration à mes articles que peut-être tout autre auteur. L’homme en sait beaucoup sur CSS et j’apprends toujours beaucoup de ses articles.
Récemment, il a publié un article sur les CSS qui déroute généralement les débutants et y a très brièvement expliqué ce qu’il a qualifié de «survol enterré». Honnêtement, je n'avais jamais vraiment envisagé d'utiliser un effet de survol semblable à celui-ci et j'avais hâte d'en explorer les implications. Ce qui suit est le résultat de cette exploration.
Qu'est-ce qu'un vol stationnaire enterré?
Le concept d'un vol stationnaire enfoui est assez simple. L'idée générale est que nous modifions généralement l'élément survolé. Voici un exemple:
Ici, nous avons un lien simple qui change de couleur en vol stationnaire. Cependant, il s'avère que nous ne devons pas nécessairement changer l'élément sur lequel nous survolons, mais que nous pouvons en fait choisir de changer l'un de ses descendants. Voyons à quoi cela ressemble:
Ici, la déclaration a presque la même apparence mais a un effet radicalement différent. Lorsque la souris de l'utilisateur entre n'importe où dans le conteneur parent, tous les liens de ce conteneur changent immédiatement de couleur.
Il est important de noter que IE6 ne prend pas en charge les survols sans lien. Il est également important de noter que IE6 est une sale excuse pour un navigateur de nos jours et ne me concerne pas beaucoup en ce qui concerne l'enseignement.
Simulation d'une animation par image clé
À présent, réalisant que tout ce qui précède était possible, mon cerveau s'est immédiatement dirigé vers la mise en œuvre la plus compliquée de ce scénario que je pouvais trouver.
Les cas d'utilisation simples pour cette méthode sont pratiques, mais vous pouvez probablement les imaginer vous-même. Au lieu de cela, je voulais faire quelque chose d'amusant. Le résultat est assez peu pratique et ne prend pas en charge les meilleurs navigateurs, mais répond à l'objectif de vraiment vous faire penser à l'application créative de survols enfouis.
L’idée de base que j’ai eu est de simuler un webkit-keyframe-animation avec CSS3 basé sur la transition simple, qui a beaucoup mieux pris en charge. Le résultat sera une animation complexe en plusieurs étapes, déclenchée par un événement de survol. Pourquoi? Parce que nous sommes tous des nerds ici et que ce sera amusant à construire, voilà pourquoi.
Mise en route: le HTML
Nous n'avons pratiquement pas besoin de HTML pour ce projet. Je n'ai fait que créer un conteneur avec un en-tête et quelques paragraphes. Notre objectif sera de déclencher plusieurs animations lorsque l'utilisateur survole la div.
CSS de base
Ces styles sont pour la plupart arbitraires et peuvent être modifiés à votre guise. J'ai défini un joli fond graphique sombre, créé un cadre visible et défini le style du texte.
À ce stade, l'aperçu en direct ressemble à l'image ci-dessous. Comme vous pouvez le constater, notre texte déborde de la boîte, mais c'est tout à fait correct car nous allons changer cela dans une minute.
Styliser l'en-tête et les paragraphes
Voici le schéma de base de notre animation: l'en-tête est seul, centré verticalement dans le conteneur. En vol stationnaire, l'en-tête disparaît et les paragraphes s'affichent un à la fois.
Pour que cela se produise, nous devons d’abord positionner l’en-tête de manière absolue. Cela nous permettra de placer l'en-tête où nous le voulons sans affecter les trois paragraphes en dessous.
Notez que définir la hauteur de ligne égale à la hauteur du conteneur centre l'en-tête verticalement dans la div.
Ensuite, nous voulons masquer nos paragraphes. Nous allons les faire passer de invisible à visible, j'ai donc utilisé la propriété opacity pour accomplir cela.
Le résultat devrait ressembler à celui présenté ci-dessous, seul l'en-tête étant visible à l'intérieur du conteneur à ce stade.
Définir les animations
Maintenant que tout est en ordre et que les états de visibilité sont définis, il est temps de terminer en faisant en sorte que les animations fonctionnent.
Nous commencerons par définir notre transition d’en-tête en utilisant les différents préfixes du navigateur. Ensuite, nous utilisons notre premier vol stationnaire enterré! Encore une fois, l’idée est que, lorsque le conteneur est survolé, les animations commencent. Dans cet esprit, nous utilisons conteneur: vol stationnaire h2 pour créer un événement qui ne s'applique qu'à notre en-tête.
Une fois que nous avons ciblé notre en-tête, nous le relevons et réduisons l'opacité à zéro.
Animation des paragraphes
Voici la partie délicate.Nous avons trois paragraphes différents et voulons les faire disparaître en un à la fois. Ce que nous devons faire ensuite, c'est cibler chaque individu individuellement et les afficher à des vitesses différentes.
Comme nous n’avons attribué à aucun des paragraphes un identifiant ou une classe spéciale, nous utiliserons nième enfant saisir chacun d'eux individuellement. Comme les animations ne sont de toute façon pas supportées par IE, cela ne posera pas de problème.
Les longueurs spécifiques des animations sont un peu étranges. Je devais à peu près jouer avec la façon dont la tête s'estompait et celles-ci disparaissaient jusqu'à ce que je trouve quelque chose qui me plaisait. Ces chiffres semblent bien fonctionner:
Lorsque l'utilisateur survole le conteneur, nous souhaitons que les paragraphes apparaissent. La dernière étape consiste donc à utiliser un autre survol enterré pour cibler les balises de paragraphe. Nous utilisons .container: hover p pour cibler les paragraphes sur le vol stationnaire et apporter leur opacité. Les animations que nous avons configurées à l’étape précédente rendront la transition progressive et agréable.
Ce qui est bien dans toutes ces animations, c’est qu’elles ont l’air tout aussi bien à l’envers lorsque vous sortez votre souris de la div. Les paragraphes s'estompent et l'en-tête réapparaît. Très bien!
Regarde
La démonstration en direct est un peu plus compliquée, mais elle utilise la même technique que l'exemple ci-dessus. Désolé les utilisateurs d'Internet Explorer, comme toujours, ce n'est pas amusant pour vous.
Démo en direct: Cliquez ici pour lancer.
Conclusion
Avec l'aide de survols enfouis, nous pouvons réaliser beaucoup de techniques CSS vraiment intéressantes et uniques que vous avez peut-être eu du mal à affronter auparavant. Cet article a utilisé un survol enterré pour déclencher plusieurs animations CSS sur différents éléments afin de présenter la complexité des effets que vous pouvez implémenter.
Laissez un commentaire ci-dessous et dites-nous comment et si vous utilisez des survols enterrés.