Chargement…
Défilement d'Images en CSS

Défilement d’Images en CSS



On vous a montré différentes façon de créer des défilement avec Jquery et CSS3. Maintenant on va vous montrer comment créer un Défilement Images avec un simple code en CSS (PURE CSS). Ce code peut être inséré et utilisé sur n’importe quel page web, Joomla ou WordPress. On va créer des effets et des animations de défilement d’images à droite, défilement à gauche, défilement d’en Bas et défilement d’en haut.

Exemples de Défilement d’Images en CSS

Le principe est simple, au passage de la souris sur les images Vignettes, Les grandes images se défilent.

Défilement d'Images en CSS

Pour voir cet diaporama en action, cliquez sur notre démo :

Démonstration

Comment Tout Cela Marche

Pour notre animation de défilement d’images d’en bas, on insère deux Class dans notre page :

vignette pour les petits images en haut, et grand pour les images qui défilent en bas.

On utilise ses attributs pour l’animation des grandes images :

Avec ce code, on pousse tous les grandes images en dehors de cadre (alaune), puis on remplace l’image a la une avec celle qui est activé par le passage souris. Une fois la souris déplacer, on remet l’image a la une avec ce code :

Plus d’information sur ses attributs : http://www.w3schools.com/css/css3_transitions.asp

Puis on utilise ses attributs pour les Vignettes :

Box-shadow est utilisé pour l’effet au passage Souris sur les images Vignettes.
Plus d’informations sur box-shadow : http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Voila, maintenant a vous de jouer un peu avec ses codes :), Voici le code Source de notre Animation.

Télécharger Code Source

Si vous avez des questions ou simplement dire Merci ;) n’hésitez pas !



Laisser un commentaire