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.
Table des matières de cette formation jQuery (durée : 1h38m)
-
- Introduction gratuit 00:01:15
- Préparer la page HTML et les styles CSS 00:07:41
- Créer le fichier XML en PHP 00:05:03
- Charger le XML en AJAX, les fonctions creeGalerie et creeVisuel 00:16:15
- Créer les styles CSS suivant, boucler et nettoyer 00:06:29
- Créer l'objet jQuery visuelImage, le loader et quelques calculs… 00:08:20
- Charger l'image test et créer les images 00:18:12
- Animer 00:23:50
- Diffuser le dernier Tween ! 00:08:20
- Optimiser les ressources pour les iPhones, iPad, iPod, Android… 00:11:30
- Fichiers sourcestélécharger
- Certificat
Formateur : Graphoeil
-
Avec quelle version de logiciel ce tuto est-il compatible ?jQuery
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
