Publié le 08 août 2018

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.0

 

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.0

See the Pen 3 views simple CSS by Benjamin Simier (@benjaminsimier) on CodePen.0

See the Pen 3 views simple CSS by Benjamin Simier (@benjaminsimier) on CodePen.0

 

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.0

See the Pen 3 views with Jquery (mouse over) by Benjamin Simier (@benjaminsimier) on CodePen.0

See the Pen 3 views with Jquery (mouse over) by Benjamin Simier (@benjaminsimier) on CodePen.0

See the Pen 3 views with Jquery (mouse over) by Benjamin Simier (@benjaminsimier) on CodePen.0

 

Voir le projet sur CodePen

 

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

2 commentaires

    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…

    Bonjour, merci beaucoup 🙂
    Dans ce cas, le javascript sert à ajouter une class css qui va réduire la largeur des trois blocs. Et j’utilise le :hover sur le bloc “sectionné” pour augmenter sa largeur.

    Je vais me pencher sur la question d’un “css only” avec le même effet !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec