Il y a quelques mois j’ai partagé ici même un de mes codes qui permettait de réaliser simplement un effet “double views” en CSS.
Je vous mets le lien direct vers l’article ici !
See the Pen 2 views with mouseover (Only CSS) by Benjamin Simier (@benjaminsimier) on CodePen.
Aujourd’hui j’ai décidé d’améliorer mon projet et de le partager avec vous. L’idée était de créer, non pas un “2 vues” mais un “3 vues” tout en gardant l’idée de départ (animation, disposition, …)
J’ai réalisé 2 projets, le premier utilise simplement du CSS et il n’y a pas d’animation sur la largeur des views. Le second est une évolution du premier et intègre en plus du Jquery.
Que ce soit pour la première version ou la deuxième, j’ai décidé de partir sur une liste HTML (ul > li), ce qui me permettra par la suite de compter les éléments li.
Première version (Seulement CSS)
Comme vous pouvez le voir, il n’y a pas réellement d’animation, si ce n’est un changement d’opacité au passage du curseur.
See the Pen 3 views simple CSS by Benjamin Simier (@benjaminsimier) on CodePen.
Version avancée (CSS + Jquery)
Cette version ajoute l’animation de la largeur des views grâce au Jquery.
See the Pen 3 views with Jquery (mouse over) by Benjamin Simier (@benjaminsimier) on CodePen.
Pour utiliser les fonctions Jquery, utilisez le CDN : https://code.jquery.com/jquery-3.3.1.min.js
Bonjour, le rendu est très sympa !
Je me demande toutefois s’il ne serait pas possible d’obtenir l’équivalent sans Javascript en utilisant les CSS grids et le classique :hover pour détecter le survol.
On peut normalement changer dynamiquement la taille et y ajouter une animation il me semble…