Créer 3 vues en CSS et Jquery + exemples
Suivez-moi sur
Non merci, je ne suis pas intéressé
Développeur & Designer

Créer 3 vues en CSS et Jquery + exemples

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.

Voir le projet sur 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.

Voir le projet sur CodePen

Pour utiliser les fonctions Jquery, utilisez le CDN : https://code.jquery.com/jquery-3.3.1.min.js

One thought on “Créer 3 vues en CSS et Jquery + exemples

  1. 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…

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise les cookies pour vous garantir la meilleure expérience possible !