Je crée un site Web comme celui-ci (diaporama vertical presque):
http: // MikelegacyWebDesign .com / scrollpage_test / index.html
La seule chose que je cherche à faire que je ne puisse pas comprendre est comment faire le défilement Snap sur le point où le changement de couleur est le cas. défilement.
Par exemple, lors du défilement, vous arrivez à environ 50-100 px près du haut de la couleur suivante que vous défilez, ce serait bien si cela allaiter à ce point, au lieu de continuer à continuer à Faites défiler, car il est difficile d'obtenir ce «cadre» pour aligner parfaitement. Il dépend de l'utilisateur de faire défiler la quantité parfaite afin qu'elles visualisent le cadre complet et non des morceaux de l'ancien ou de la trame suivante dans la séquence.
Quelqu'un qui sait s'il y a un plugin JQuery ou quelque chose pour ce serait mon héros.
Voici toute la page jusqu'à présent. Il est simple de coder pour obtenir l'effet actuel:
3 Réponses :
J'étais après la même chose alors a posé une question similaire il y a quelques semaines. J'ai trouvé un addon appelé stellar.js qui avait la fonctionnalité mais la démo était horizontale et Je ne pouvais pas que la vie de moi le change à la verticale. Quoi qu'il en soit, quelqu'un a posté une solution, que j'ai édité pour Mousescroll au lieu de cliquer sur: http://jsfiddle.net/djsbaker / dxzk4 /
Sur un site Note, j'avais des problèmes avec cela étant assez laggy avec d'énormes images de fond fixes. En fait très laggy, mais j'utilisais Parallax qui n'a pas bien mélangé.
Oui, c'est possible . Leur code est assez terrible cependant. Tout en animant ScrollTop , vous voudrez vous assurer que une entrée d'utilisateur supplémentaire qui conduit normalement à la défilation est ignorée. Jetez un oeil à ce cas-test pour avoir une idée de la manière d'empêcher un utilisateur de faire défiler. < / p>
Vous pouvez obtenir l'effet souhaité à l'aide du
function jumpScroll() {
window.scroll(0,250);
}
Je n'ai pas encore eu la chance de l'examiner, mais je cherche la même chose et je suis tombé sur ce Benoit.Pointet.info/stuff/jQuery-scrollsnap-plugin
Vous voudrez peut-être jeter un coup d'œil à FullPage.js .