Chargement…
Créer Un Défilement Horizontal Du Contenu

Créer Un Défilement Horizontal Du Contenu



On vous a déjà montrer comment créer un Défilement d’Images en CSS, maintenant on va vous montrez comment créer un défilement horizontal du contenu en CSS sans javascript ou jQuery. On va insérer différents animations en utilisant seulement du CSS (Pure CSS) : Changement de couleur avec passage de la souris sur un contenu caché et défilement de ce contenu dés qu’on clique sur un élément de notre menu.

Défilement Horizontal Du Contenu

Voici une illustrations de ce qu’on va faire avec notre code :

Créer Un Défilement Horizontal Du Contenu

Comment faire le défilement en CSS sans Javascript ?

Tout le monde sais que CSS ne supporte pas le Click Event! Alors comment on va faire pour le défilement par Clique!? Bon, si vous voulez la simplicité, utilisez la technique dans notre exemple de Défilement d’Images en CSS et jQuery, mais pour ce défilement horizontal de contenu on a voulu pousser le CSS à sa limite :) et essayer d’apprendre quelques chose de nouveau!

1- Le HTML

Cela va paraître fou pour vous :) mais on va utiliser des Radios pour faire ce défilement.
Pour commencer, on va insérer un formulaire :

Chaque « li » (Liste) va représenter un défilement, si vous voulez plus ce que 3 alors insérez plus de LI. La prochaine étape est de compléter notre formulaire, pour cela on va insérer trois éléments : input, label et une div. Les inputs sont des Boutons Radios qui sont attachées à des Labels, et les Div serons utilisées pour insérer notre contenu.

Fonctionnement de notre CSS

– Pour les LI qui normalement s’affichent en POINTS, on utilise :

– Pour empêcher les boutons radios de s’afficher normalement en Cercles, on a inséré :

Après avoir cacher les LI et les boutons radios, changer le style des Labels, la partie la plus importante est le défilement :

Le principe est très simple : input [type= »radio »] vise tous les Radios, Puis on lui demande d’afficher le contenu de la div defilement s’IL EST CLIQUER.

Vola, c’est simple et rapide, si vous voulez essayer aussi, vous pouvez télécharger le code source de ce défilement de contenu.

Télécharger Code Source



Laisser un commentaire