Apprenez à concevoir un Diaporama sans programmation
Dans ce tuto en vidéo, je vous propose d'apprendre à réaliser un diaporama avec apparition des images en fondu.
La programmation de ce genre de diaporama est hyper complexe en JavaScript, voire en jQuery.
Je vous propose d'oublier JavaScript et jQuery et de développer ce diaporama sans aucune programmation.
De quoi alléger considérablement notre page web.
En réalité, pour réaliser ce fondu d'images, nous allons utiliser uniquement du CSS. Notre diaporama sera bien évidemment responsive, c'est à dire qu'il pourra s'afficher peu importe le terminal utilisé (smartphone, tablette, ordinateur).
A la fin du cours, vous pourrez passer un petit QCM pour valider vos connaissances acquises.
Si vous avez des questions, je reste disponible dans le salon d'entraide du tutoriel.
Si vous souhaitez aller plus loin dans les connaissances de la technique que nous allons utiliser dans ce tuto, je mets à votre disposition un cours théorique dédiée à l'animation CSS.
Table des matières de cette formation CSS (durée : 34m38s)
-
- Mise en place des bases du travail 00:04:45
- Empilement des images 00:06:11
- Mise en place de l'animation 00:03:59
- Mise en place des règles de l'animation 00:05:40
- Amélioration du style général de la page 00:04:06
- Mise en place du responsive 00:06:05
- Conclusion 00:01:11
- Bonus 00:02:41
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Excellent tuto mené de main de maître par l'excellent Carl Brison !!!
-
Deux points particulièrement appréciables dans ce tuto : la progressivité et la clarté. Et chaque étape étant expliquée et non simplement étalée platement est remarquable de pédagogie. Un travail excellent. Merci, Monsieur Brison.
-
C'est tout simplement magique, et si facile de mise en oeuvre. Encore merci, Carl, pour nous faire gagner tant de ce temps si précieux.
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le code du tuto
-
Bonjour,
je voudrais être certaine que ce tuto est compatible avec tous les navigateurs (j'ai déjà réalisé un code qui fonctionne sous chrome et Mozilla mais qui n'apparait pas sous explorer et edge…)ainsi qu'être sûre qu'il s'agit bien d'un diaporama automatique, en vous remerciant,
chloé
ChloéBonjour Chloé, merci pour votre message. Le code que je propose ici est un code CSS parfaitement valide et reconnu par la W3C. Tous les navigateurs récents reconnaissent ces codes CSS. Carl.
note moyenne
avis laissés