Blog iamvdo.me
Cet effet est maintenant un peu dépassé. En tout cas, il est vu et revu. Le but de cette démo est de reproduire ce fameux menu de présentation, mais sans utilisation de JavaScript. Vous allez voir que ce n’est pas si simple... C’est un bon exercice pour qui veut tester quelques sélecteurs avancés, et commencer avec les transitions CSS et les transformations 3D.
Note : Sur Firefox, pensez à désactiver les box-shadow (case à cocher) pour une expérience convenable. Voir à la fin de cet article pour l’explication.
La structure de base
Une simple liste HTML est utilisée ici. Chaque élément de liste <li> est affiché en display: inline-block et dimensionné.
ul{
width: 560px;
padding: 0;
}
ul li{
display: inline-block;
width: 112px;
height: 165px;
background: orangered;
}Je ne m’étendrais pas plus sur les styles décoratifs, le principal étant ici la réalisation de l’effet.
Analyse de l’effet Coverflow
Analysons un peu ce que nous souhaitons au chargement de la page :
- L’élément central est affiché devant nous, légèrement agrandi
- Les autres éléments « regardent » cet élément :
- Les éléments précédents subissent une rotation d’un certain angle
- Les éléments suivants subissent une rotation du même angle, mais en négatif
Puis lors du survol, l’élément survolé prend le rôle de l’élément central. Les autres éléments se comportent de la même façon que précédemment.
Mise en place initiale
Pour notre première mise en place, appliquons :
- une rotation de
45degà tous nos éléments - une rotation de
0deget une mise à l’échelle de notre élément central - une rotation de
-45degaux éléments qui suivent l’élément central. Pour cela, aidons-nous du sélecteur:nth-child()et du sélecteur d’adjacence indirecte~.
/* tous les elements */
ul li{
...
transform: rotateY(45deg);
}
/* l'element central */
ul li:nth-child(3){
...
transform: rotateY(0deg) scale(1.2);
}
/* les elements qui suivent l'element central */
ul li:nth-child(3) ~ li{
...
transform: rotateY(-45deg);
}
Pour une impression de 3D, il ne faut pas oublier de définir la perspective sur l’élément parent :
ul{
...
perspective: 500px;
}
Ajouter les différents états
Attention, je vous préviens tout de suite, tout est une question de poids des sélecteurs !
Pour notre état survolé, il nous faut surclasser nos styles déjà appliqués. Tout d’abord, modifions l’état de l’élément survolé (avec la pseudo-classe :hover) :
/* l'élément survolé */
ul li:hover{
...
transform: rotateY(0deg) scale(1.2);
}Cela fonctionne mais deux problèmes se posent :
- 1 - l’élément central reste dans son état d’origine
- 2 - les éléments 4 et 5 ne subissent pas le survol. En fait, le sélecteur
ul li:nth-child(3) ~ lidéfini plus haut est prioritaire. Il faut donc surclasser ce style.
Pour le problème 1, ajoutons simplement un style pour les éléments qui suivent l’élément survolé :
/* les elements qui suivent l'element survole */
ul li:hover ~ li{
transform: rotateY(-45deg);
}Pour le problème 2, ajoutons un sélecteur qui cible de manière plus précise que précédemment. Ici, nous ciblons les éléments survolés qui sont précédés de l’élément central (ul li:nth-child(3) ~ li:hover).
/* les éléments survolés */
ul li:hover,
ul li:nth-child(3) ~ li:hover{
...
transform: rotateY(0deg) scale(1.2);
}Nous avons donc corrigé ces deux problèmes. Quoique, pas tout à fait ! En fait, un dernier problème se pose :
- 3 - l’élément central reste toujours dans son état d’origine lors du survol des éléments 4 et 5.
Pour régler le problème 3, et comme il n’existe pas de sélecteur d’adjacence inverse, nous allons devoir ajouter un style pour les éléments non survolés, mais seulement lors du survol du parent <ul>. Ce qui nous donne :
/* les elements non survoles, lors du survol du parent */
ul:hover li:not(:hover){
transform: rotateY(45deg);
}Cela semble marcher, sauf que non ! Nous venons en effet de surclasser un style précédent : celui du problème 1. Il nous faut donc mettre à jour notre sélecteur pour que cet ancien style surclasse le précédent. Ainsi, ajoutons le survol sur le parent ou ajoutons un id (le principal étant de surclasser le style) :
/* les elements qui suivent l'element survole */
ul:hover li:hover ~ li{
transform: rotateY(-45deg);
}
ou
ul#id li:hover ~ li{
transform: rotateY(-45deg);
}Hourra ! :) Notre Coverflow se comporte bien comme attendu. Mais règlons encore les quelques petits bugs restants.
Empêcher le clignotement et ajouter les transitions
Nos éléments étant trop séparés les uns des autres (du aux transformations 3D), cela provoque un clignotement pendant le déplacement puisque la souris sort de l’élément. Ajoutons alors une marge négative pour resserrer l’ensemble. Modifions également la taille du parent, pour que l’origine de la perspective soit toujours centrée.
ul{
...
width: 500px;
}
ul li{
...
margin-right: -15px;
}
Ajoutons ensuite les transitions CSS pour un effet plus réaliste :
ul li{
...
transition: all .45s;
}Ici, toutes les propriétés sont animées en 0.45 seconde.
Gérer l’empilement avec z-index
Pour comprendre les problèmes d’empilement, modifions la couleur de certains éléments :
/* les elements pairs */
ul li:nth-child(odd){
background: crimson;
}Les éléments sont empilés en suivant leur ordre dans le code source (par défaut) et ce n’est pas ce que nous souhaitons.
Utilisons alors la propriété z-index sur nos éléments. Attention, il faut également penser à ajouter position: relative sinon le z-index est sans effet.
/* z-index de tous les elements */
ul li{
...
position: relative;
z-index: 50;
}
/* z-index de l'element central (devant) */
ul li:nth-child(3){
...
z-index: 55;
}
/* z-index du premier et dernier element (derrière) */
ul li:first-child,
ul li:last-child{
z-index: 45;
}
Enfin, modifions le z-index de l’élément survolé, et profitons-en pour surclasser le style du premier élément survolé :
/* les éléments survolés */
ul li:hover,
ul li:first-child:hover,
ul li:nth-child(3) ~ li:hover{
...
z-index: 60;
}Ouf ! C’est terminé. N’hésitez à voter pour cet article s’il vous a plu et à en discuter sur le forum de l’article si vous avez des questions.
Compatibilité
Le menu est fonctionnel dans tous les navigateurs récents, sauf Opera qui ne supporte pas encore les transformations 3D.
Sur Firefox, un bug connu provoque un clignotement des éléments. C’est le cas lorsque box-shadow, transition et transform3D sont utilisés conjointement. Pour une expérience convenable, pensez à désactiver les box-shadow (case à cocher)
De plus, l’effet est limité à une utilisation à la souris. Il ne tient qu’à vous de mettre en place une utilisation tactile ou clavier.
#1par Robin4a4, le 15 octobre 2012
Tout simplement génial ! Y’a pas d’autres mots. Merci beaucoup pour ce tuto très bien expliqué !
#2par gloriole, le 19 octobre 2012
Moi aussi j’aime ce beau travail qui est fait. Et, juste avouer que j’apprécie vraiment. Merci !
#3par shalk, le 31 octobre 2012
impressionnant.
Un gros travail sur les sélecteurs !
Je vais refaire cet exo, pour mieux appréhender.
Merci pour le cour ;)
#4par kev, le 14 novembre 2012
excellent, il manque juste un complément pour l’arret sur image lors d’un clic
#5par romram, le 15 novembre 2012
Ca marche parfaitement sur Chrome et Safari. Par contre, même sans les ombres, ça rend très mal sur Firefox, et sur IE 9 (comme d’habitude), ça ne fonctionne pas du tout. Enfin sinon, c’est vraiment superbe, bravo !
#6par speecial, le 14 février 2013
aie aie raide dingue de ces effets de transition (merci le css3 et bravo)
#7par Gotrunk95, le 7 mars 2013
Génial ça fonctionne parfaitement avec Firefox 19 même le bug de l’ombre a été corrigé
#8par marco, le 20 janvier 2014
vraiment super bien tes tutos je te souhaite beaucoup de courage encore. super génial