Animation de l'icône burger d'un menu
Animation de l'icône burger d'un menu
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
Plan détaillé du cours
Leçon 1Introduction
01m15s
Leçon 2Préparer la page HTML et les styles CSS
07m41s
Leçon 3Créer le fichier XML en PHP
05m03s
Leçon 4Charger le XML en AJAX, les fonctions creeGalerie et creeVisuel
16m15s
Leçon 5Créer les styles CSS suivant, boucler et nettoyer
06m29s
Leçon 6Créer l'objet jQuery visuelImage, le loader et quelques calculs…
08m20s
Leçon 7Charger l'image test et créer les images
18m12s
Leçon 8Animer
23m50s
Leçon 9Diffuser le dernier Tween !
08m20s
Leçon 10Optimiser les ressources pour les iPhones, iPad, iPod, Android…
11m30s
Aperçus
