CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 4 - Aller plus loin avec JavaScript et jQuery Création d'une page web animée avec jQuery

Création d'une page web animée avec jQuery

Apparition progressive au scroll
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 4 - Aller plus loin avec JavaScript et jQuery
Revoir le teaser Je m'abonne
4,3
Transcription
Cette leçon fait partie de la formation
59,90€ Ajouter au panier

Formation incluse dans l'abonnement Elephorm

Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,3
Cette leçon fait partie de la formation
59,90€ Ajouter au panier

Formation incluse dans l'abonnement Elephorm

Je m'abonne à Elephorm

Introduction à l'Animation au Défilement

Objectifs

Les objectifs de cette vidéo sont d'apprendre :
- Comment intégrer jQuery dans un projet web
- À manipuler les éléments DOM pour créer des animations de défilement
- À utiliser la méthode ScrollTop pour gérer la position des éléments sur la page

Résumé

Dans cette leçon, découvrez comment réaliser une page web où les éléments apparaissent en douceur lorsque vous défilez. Utilisez jQuery pour animer l'apparition des éléments visuels.< /p>

Description

Dans cette leçon, nous apprenons à créer une page web où les différentes parties des éléments apparaissent en douceur lorsque celles-ci entrent dans la zone de visibilité de l'utilisateur. Pour ce faire, nous intègrerons jQuery afin de manipuler les éléments HTML et de les rendre visibles avec une animation de fondu. Nous utiliserons ScrollTop et la manipulation des classes en jQuery pour détecter la position des éléments et déterminer le moment où ils doivent apparaître.

L'objectif est de créer un effet similaire au lazy loading mais centré avant tout sur l'aspect graphique. Cela signifie que les éléments sont masqués par défaut avec le CSS et deviennent visibles à l'aide d'une animation lorsque l'utilisateur défile la page.

Voir plus

Questions fréquentes

Quelle est la fonction principale de ScrollTop dans ce tutoriel ?
La fonction ScrollTop permet de déterminer la position du défilement de la fenêtre par rapport au haut de la page, ce qui est utilisé pour déclencher l'animation des éléments lorsqu'ils entrent dans la zone de visibilité.
Comment jQuery est-il utilisé pour détecter la position des éléments ?
jQuery utilise la méthode .offset().top pour obtenir la position d'un élément par rapport au haut de la page, et cette valeur est comparée à la position de la fenêtre de défilement pour déclencher les animations.
Pourquoi ajouter un délai (50 pixels) avant l'apparition des éléments ?
Ajouter un délai permet de s'assurer que les éléments n'apparaissent pas instantanément dès qu'ils entrent dans la zone visible. Cela offre une transition plus douce et améliore l'expérience visuelle.

Programme détaillé

3 commentaires
4,3
3 votes
5
4
3
2
1
Profile picture for user phbernard
Philippe B.
Il y a 5 mois
Formation de bon niveau M Audoux est un professionnel.
Dommage que nous n'ayons pas les fichiers, par ailleurs M Audoux devrait également montré les fichiers CSS
D'autre par les fichiers JS à la version utilisée par M Audoux simplifieraient le travail de l'étudiant.
Profile picture for user Azraël
William F.
Il y a 3 ans
Bonne formation.
Dommage que M Audoux ne va pas toujours au terme de ses exemples. Il manque souvent un petit "clic" qui finaliserait le cours.
Je rejoins le commentaire précédent, à savoir qu'il manque les fichiers de travail avec lesquels il serait plus facile de s'exercer.
lyazid g.
Il y a 4 ans
Très bonne formation, juste ce qu'il faut.
Est il possible d'avoir les exemples afin de pouvoir travailler dessus et ne pas être obliger de jongler entre l'éditeur et la vidéo.

Merci.