Galerie d'images avec animation d'ouverture. HTML, CSS, JS

Problème de lecture

Cette vidéo ne semble pas disponible

00:00

00:00

Sous-titres non disponibles

41m50

de formation

7

leçons vidéo

1

chapitre

Débutant

niveau requis

Carl Brison

Formateur certifié

Galerie d'images avec animation d'ouverture. HTML, CSS, JS

4.8/5 Trustpilot (1391 avis) Satisfait ou remboursé

41m50

de formation

7

leçons vidéo

1

chapitre

Présentation
Table des matières

Créez une Galerie d’Images Interactive avec Effet Popup !

Vous souhaitez apprendre à créer une galerie d’images moderne et interactive en HTML, CSS et JavaScript ? Cette formation est faite pour vous ! 🎯

Objectifs de la formation

À travers ce cours, vous allez apprendre à concevoir une interface élégante et dynamique où chaque image peut être affichée en grand grâce à un effet de popup fluide et animé.
Ce que vous allez apprendre :

✅ Structurer une page web en HTML 📌
✅ Styliser une galerie d’images avec CSS 🎨
✅ Ajouter des effets interactifs avec JavaScript ⚡
✅ Créer un effet de popup animé pour afficher les images en grand 🖼️
✅ Gérer les événements utilisateurs (clic, fermeture de popup, etc.) 🖱️

Pour qui est cette formation ?

Débutants souhaitant apprendre les bases du développement web
Designers voulant ajouter de l’interactivité à leurs projets
Développeurs cherchant à renforcer leurs compétences en JavaScript

Pourquoi suivre cette formation ?

👉 Explication pas à pas, accessible à tous
👉 Un projet concret et réutilisable pour vos propres sites
👉 Un rendu moderne et professionnel

🔥 Rejoignez cette formation dès maintenant et créez votre propre galerie d’images interactive !

Pour aller plus loin :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours

Leçon 1

Leçon 2

Leçon 3

Leçon 4

Leçon 5

Leçon 6

Leçon 7

Table des matières

Leçon 1

Mise en place du HTML et des bases CSS

08m06

Leçon 2

Mise en place d'une fenêtre Popup

05m17

Leçon 3

Mettre en forme le contenu de la fenêtre Popup

07m53

Leçon 4

Mettre en place une animation CSS

05m51

Leçon 5

Mettre en place le fonctionnement JavaScript

05m29

Leçon 6

Afficher le titre et l'image dans la Popup

06m16

Leçon 7

Régler l'opacité

02m58

Aperçus

Avis des apprenants

Détail des avis

4

Commentaires

4,8/5

Note moyenne

5/5

3

4/5

1

3/5

0

2/5

0

1/5

0

Valérie Arno

Publié le 29/04/2025

Bonjour Carl - Merci beaucoup. Ce tuto est court mais le résultat est là. On a une belle galerie d'images qu'on peut afficher en grand avec un bel effet. Comme il l'a été mentionné, il faut voir ce que ça donne avec des images de différentes tailles, tant en largeur qu'en hauteur. A très bientôt.

Carl Brison

Merci pour votre commentaire très gentil, Valérie ;-)

Alain Tardif

Publié le 21/02/2025

Merci Carl pour ce cours sur la galerie d’images avec animation d’ouverture ! 🎨 J’ai adoré chaque instant de ce tuto ultra clair et pratique. L’effet de popup animé est juste génial, et votre explication détaillée sur la gestion des événements utilisateurs en JavaScript a vraiment éclairé ma compréhension. Ce genre de tutoriel, à la fois instructif et dynamique, est exactement ce que je recherche pour progresser. Un immense merci pour cette pépite de formation, j’en raffole ! 🚀 Validé 100%.

Carl Brison

Merci! Merci beaucoup pour votre commentaire très gentil, Alain ;-)

Jean Philippe

Publié le 21/02/2025

Bonjour, ce tuto est parfait pour que je puisse progresser en JavaScript. Merci Carl.

Carl Brison

Merci beaucoup pour votre commentaire très gentil, Jean-Philippe ;-)

Formateur certifié

5

Voir ses cours

Prérequis

,

Débutant

Accessibilité

Sous-titres français (autogénérés)

Ressources téléchargeables

Fichiers sources (712.11 Ko)

Catégories

Programmation CSS Image

Cours publié le 21/02/2025
Langue : Français
ID : 209281

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le code source du projet.

Choisissez votre accès

Deux façons de suivre cette formation

À l'unité

Pour vous former sur ce sujet précis

9,90€

Paiement unique, sans abonnement

Accès à vie à cette formation

41m50 de vidéo • 1 chapitre

Satisfait ou remboursé voir conditions

Accès immédiat après paiement

Avec l'abonnement

Pour progresser en continu

34,90€ /mois

Sans engagement

Cette formation + 6 777 autres en illimité

Plus de 20 nouvelles formations par mois

Résiliable en 1 clic, à tout moment

Commencer avec l’abonnement

Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

Hors connexion via l'app Tuto.com
Salon d'entraide pour vos questions
Certificat de complétion

Paiement sécurisé 1,4 million d'apprenants

4.8/5 Trustpilot

Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Continuez votre progression

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

JS moderne, Exo #1: Affichage d'une fenêtre modale

Dev. FrontEnd#2 :: Mise en place d'un Popup

Dev. FrontEnd#7 : Galerie d'images en JavaScript

CSS Effet de slider sur des images

jQuery Facile #9/10 : Les animations

Dev. FrontEnd #8 : Galerie d'images sur différentes colonnes en JS

Animer une fenêtre modale en CSS

Réaliser un effet de survol sur une galerie d'images

Bundle 10 exercices 100% frontend HTML, CSS et JS

Promo -28%

Créez un Défilement Vertical Dynamique en HTML, CSS et JS !

+ 1,400,000 d’apprenants et d’entreprises se forment au quotidien sur Tuto.com

Paiement 100% sécurisé

Vos données sont chiffrées et protégées pendant toute la transaction.

Besoin d’aide ?

Notre équipe répond à vos questions du lundi au vendredi de 10h à 12h et de 14h à 16h.
Support par e-mail ou par téléphone au 01 84 80 80 29.

9,90€

ou Abonnement 34,90€/mois