4.8/5 Trustpilot (1399 avis)
Un slideshow responsive et fullscreen avec jQuery et GreenSock
Un slideshow responsive et fullscreen avec jQuery et GreenSock
Dans ce tuto JQuery et TweenMax, nous apprendrons à un slider combinant un effet de transition sur nos images.
Au programme de ce tuto JQuery et TweenMax :
Nous commencerons par charger en Ajax les noms des images dans un fichier XML qui aura été crée en PHP (nous pourrions également récupérer ces noms via une base de données dans le cadre d'un back-office client) après avoir préparer la page HTML et les styles CSS.
Une fois récupéré, notre script jQuery génèrera la galerie de toutes les images, chacune d'entre elles sera ensuite animée via la méthode TweenMax de GreenSock.
Nous optimiserons, enfin, le script pour les supports smartphones et tablettes (iOS et Android) disposant de ressources graphiques réduites.
Les fichiers sources de ce tuto sont fournis. Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions ou remarques.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Introduction
Introduction
Leçon 2
Préparer la page HTML et les styles CSS
Préparer la page HTML et les styles CSS
Leçon 3
Créer le fichier XML en PHP
Créer le fichier XML en PHP
Leçon 4
Charger le XML en AJAX, les fonctions creeGalerie et creeVisuel
Charger le XML en AJAX, les fonctions creeGalerie et creeVisuel
Leçon 5
Créer les styles CSS suivant, boucler et nettoyer
Créer les styles CSS suivant, boucler et nettoyer
Leçon 6
Créer l'objet jQuery visuelImage, le loader et quelques calculs…
Créer l'objet jQuery visuelImage, le loader et quelques calculs…
Leçon 7
Charger l'image test et créer les images
Charger l'image test et créer les images
Table des matières
Leçon 1
Introduction
01m15
Leçon 2
Préparer la page HTML et les styles CSS
07m41
Leçon 3
Créer le fichier XML en PHP
05m03
Leçon 4
Charger le XML en AJAX, les fonctions creeGalerie et creeVisuel
16m15
Leçon 5
Créer les styles CSS suivant, boucler et nettoyer
06m29
Leçon 6
Créer l'objet jQuery visuelImage, le loader et quelques calculs…
08m20
Leçon 7
Charger l'image test et créer les images
18m12
Leçon 8
Animer
23m50
Leçon 9
Diffuser le dernier Tween !
08m20
Leçon 10
Optimiser les ressources pour les iPhones, iPad, iPod, Android…
11m30
Aperçus
