Un slideshow responsive et fullscreen avec jQuery et GreenSock
ERROR
00:00
00:00

Tuto Un slideshow responsive et fullscreen avec jQuery et GreenSock

Graphoeil
12,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Ce tuto vidéo Javascript vous permettra de réaliser un slideshow dynamique (aussi appelé carrousel) et responsive (qui s'adapte à la taille de l'écran depuis lequel il est consulté).

Au programme de ce tuto SlideShow animé en jQuery

Ce cours a une approche singulière, puisque nous utiliserons ici la balise HTML5 data et créons les visuels en jQuery. Cette méthode a l'avantage de ne pas charger toutes les images du slideshow au chargement de la page et donc d'améliorer les performances de votre sites Internet.

Nous utiliserons la bibliothèque GSAP de GreenSock pour la transition des images et l'animation des titres et des sous-titres.

Au programme également, la diffusion d'événements personnalisés en jQuery : fonction de nettoyage, boucle each, while, et encore bien d'autres choses...

Le fichier projet est fourni et je reste disponible pour répondre à vos questions dans le salon d'entraide.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction
Chapitre 2
HTML et CSS
Chapitre 3
Javascript
Chapitre 4
Post-scriptum

Plan détaillé du cours

Chapitre 1 : Introduction
01m10s
 
Leçon 1Présentation du slideshow
Chapitre 2 : HTML et CSS
18m18s
 
Leçon 1Construire le HTML
Leçon 2Construire le CSS
Chapitre 3 : Javascript
47m17s
 
Leçon 1Récupérer les informations data-
Leçon 2La fonction creeVisuel
Leçon 3L'objet VisuelSlideShow - Partie 1
Leçon 4L'objet VisuelSlideShow - Partie 2
Leçon 5Incrémentation et nettoyage
Leçon 6Diffusion d'événements personnalisés
Chapitre 4 : Post-scriptum
02m01s
 
Leçon 1Tester le nettoyage

Aperçus

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

JavaScript , jQuery

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1452 tutos gratuits

Notre politique de protection des données