Slideshow CSS3, recherche du bon code.

Signaler
Messages postés
3
Date d'inscription
lundi 10 juin 2019
Statut
Membre
Dernière intervention
5 août 2020
-
Salut les dév!

J'espère que vous allez bien en cette chaleur intenable.

Je suis étudiant en graphisme (DNMADe) et j'ai un projet de coder mon site web (portfolio) pour l'entrée en master (DSAA ou DNSEP) 2021.

L'année dernière j'avais 2h/semaine de cours de développement html/css lors de mon cursus scolaire mais ayant oublié la plus part des choses je suis actuellement (et bientôt fini ahah) la formation sur Openclassroom "apprenez à créer votre site web html et css".

Ainsi je me suis inspiré de deux sites déjà existant pour la conception de mon site web.
Aujourd'hui ce qui me pose problème c'est de trouver le bon code pour réaliser ce genre d'effet "slide show" sur le site du studio de graphisme "mynameis" : http://mynameis.fr/#sixpack.

Comme vous pouvez le voir quand on survole l'image visible on a un curseur pour visionner l'image de droite ou gauche (avant/arrière). Je suppose que l'image est "scindé en deux" pour obtenir les flêches de droites et gauche. Premièrement je recherche le code pour avoir cet effet.

MAIS ce qui me parrait le plus compliqué c'est bien l'effet du slide show. Est-ce du Javascript ?
Cet effet est EXACTEMENT celui que je recherche. J'aime beaucoup également voir une petite partie de la prochaine image sur la droite du navigateur.

Avez vous une idée du code à utiliser ? En gros de dire quand tu clique sur le bouton l'image de droite arrive, remplace l'ancienne et cette dernière "disparaît" avec une numérotation automatique (1/6, puis 2/6) durant la transition.

Je vous laisse le lien youtube d'une mini vidéo de la maquette approximative de mon site: composition, effets de transition slideshow, position fixe de certains éléments etc..

Lien de la vidéo: https://youtu.be/UnrzrkB75CM

En attendant un retour de votre part, je vous souhaite une excellente journée ;)
Merci de m'avoir lu, et en espérant avoir un retour constructif :D
Cordialement
Guillaume

PS: dsl pour l'orthographe