Bonjour,

Je rencontre un petit problème avec mon code.

Ce que je fais

Hello, je suis actuellement en train d'essayer de reproduire l'effet de scroll de ce site : https://kuon.space/
J'ai mis en place un scroll-snap qui fonctionne bien et donne un début d'effet intéressant en me faisant un focus sur chaque div

html{
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
}
header, .presentation, .skills {
    height: 100vh;
    scroll-snap-align: start;
}

Ce que je veux

Malgré ça ce n'est pas tout à fait ce qu'il me faudrait, j'aimerais que l'utilisateur n'ai pas la possibilité de scroll librement sur le site, que chaque fois qu'il scroll il passe direct à la div suivante/précédente sans le temps d'attente avant la transition du scroll-snap, le scroll ne se ferais alors plus librement mais juste de div en div ou chacune passe à son tour comme un slider par exemple (comme sur le site que j'ai envoyé du coup)

Mais je ne sais pas du tout par où commencer ni comment m'y prendre c'est pour ça que je vous demande un peu d'aider si c'est possible ! Merci d'avance !

2 réponses


Si ton scroll fonctionne,
Tu pourrais simplement définir que tes div fasse 100vh également ( 100vh correspond à 100% de l'écran de l'utilisateur)
Si tu lui demande de descendre de 100vh, tes divs doivent faire 100vh également.

Si tu bug encore, n'hésite pas à envoyer ton code, ça sera plus simple

Redelta
Auteur

C'est pas tout à fait ce que je cherchais à faire mais c'est bon au final j'ai réussi à faire ce que je voulais faire ! Ca ne demandais pas de scroll-snap au final, j'ai utilisé un package qui répondait déjà à mes besoins https://alvarotrigo.com/react-fullpage/#page1 c'est ce genre d'animation que je voulais au final
Merci quand même pour ton aide !