Chargement…
Contenu de Page Avec Effet Slide

Contenu de Page Avec Effet Slide



Une des tendances en web design 2014 est le contenu de page qui glisse comme un slideshow dés qu’on touche le bouton défilement de la souris (Scrolling). Dans ce tutoriel on va créer un effet slide css 3 avec l’aide de Jquery et HTML5, cette animation est 100% Responsive et ça marche sur tous les appareils que se soit fixe ou mobiles.

Effet Slide CSS 3

Cette technique utilise la librairie de Jquery avec une transition CSS3, notre script vérifie les classes spéciales sur la page et utilise jQuery pour ajouter une nouvelle classe pour les effets de transition ‘Slide Effect‘. Une fois l’animation fini, il faut actualiser la page pour la revoir.

Démonstration

Structure de la page

Pour commencer il faut ajouter tous les éléments de base, a savoir la dernière librairie de jQuery, le code simple de la page en HTML5 et une feuille de Style, puis on ajoute notre code qui va gérer l’animation dans un script : effetslide.js

Jetons un coup d’œil sur la structure de la première animation dans la page :

Comme vous pouvez voir, l’animation se divise en deux DIV, on ajoute les class et les attributs directement, comme l’attribut « data-position » qui nous montre d’ou la photo ou le contenu va Glisser, Left pour gauche et Right pour droite.

Puis on ajoute notre CSS, les class : flotterd et flotterg sont utilisées pour faire la transition des éléments flottants, cette déclaration est masqué par l’opacité zéro. Notez bien que ses déclarations sont attachées a l’attribut notViewed : notViewed Blockanimation flotterd, cette attribut est celle chargé des animations de tous le contenu.

On la retrouve dans notre script :

Voila, maintenant c’est a vous de tester cette animation :

Télécharger Code Source



Laisser un commentaire