Share
Si vous souhaitez générer de superbes animations de défilement dans votre prochain projet, ne cherchez plus. ScrollMagic est une bibliothèque JavaScript qui vous aide à créer des interactions de défilement «magiques» qui réagissent sans effort à la position de défilement actuelle de l'utilisateur et déclenchent des animations ou des événements synchronisés..
ScrollMagic a récemment subi de gros changements. Voici donc un survol rapide des changements et améliorations depuis sa renaissance..
La page d'accueil ScrollMagicLes dépendances qui étaient jadis des composants essentiels de ScrollMagic, telles que GreenSock (GSAP) et jQuery, ont été entièrement supprimées de la bibliothèque. Depuis la version 2.0.0, tout ce qui ajoute des fonctionnalités en haut de ScrollMagic est traité comme un plugin, faisant de ScrollMagic une bibliothèque autonome (6Ko compressé)!
Le Changelog contient de nombreuses autres facettes qui ont été ajustées, si vous choisissez de plonger plus profondément. Si vous n’avez pas le temps, voici une liste des changements apportés:
Accentsconagua
ScrollMagic.Controller () ScrollMagic.Scene () triggerOffset pinClass (ceci peut être réalisé avec setClassToggle en 2.0)suiveurs la valeur par défaut est définie sur faux ajouter et retirer .parent à .manette plugins / scene.addIndicators et peut être ajouté avant le contrôleur et fonctionne même lorsque des scènes sont supprimées et ré-ajoutées.removeIndicators Des améliorations de performances améliorant la vitesse de ScrollMagic ont été suggérées par Paul Irish en ce qui concerne la mise à jour de RAF (request animation frame). Au lieu d'écouter directement l'événement de défilement, une technique appelée «décomposition» a été utilisée à l'origine. Cela signifie que tout ce qui doit être exécuté sur Scroll est réellement exécuté dans un délai d'attente (delay). Quand onScroll avait été déclenché la seule chose qui a changé était une variable telle que wasScrolled = true et inspecté pour dans la fonction de délai d'attente. A l’origine, la fonction anti-rebond était appelée RAF et cherchait constamment le était enroulé var dans une boucle.
Au lieu d’une boucle, il est simplement programmé de vérifier le prochain RAF lorsqu’un événement de défilement est déclenché. Tout cela signifie que lorsqu'aucun défilement n'est en cours, aucune boucle n'est en cours d'exécution!
Les durées réactives doivent être l'une de mes améliorations préférées de la bibliothèque, à part l'amélioration des performances. le Scène durée peut maintenant accepter une chaîne de valeur en pourcentage comme "100%". Le parchemin sera calculé en fonction de la taille du conteneur du parchemin. ScrollMagic utilisera la hauteur du conteneur pour les systèmes de défilement vertical et sa largeur pour les conteneurs de défilement horizontal..
var scene = new ScrollMagic.Scene (duration: "100%");
L'ordre des scripts est un peu différent maintenant, puisque des bibliothèques telles que GSAP ont été séparées au lieu de faire partie du noyau ScrollMagic. Cela signifie que chaque fois que vous désirez une bibliothèque comme TweenMax, vous devez d'abord charger la bibliothèque principale GSAP, puis la bibliothèque principale ScrollMagic, puis enfin le plugin ScrollMagic que vous avez choisi..
N'oubliez pas de toujours charger la bibliothèque principale GSAP en premier, puis les plugins ScrollMagic.
L'appel de script pour le plug-in GSAP est le nouveau plug-in de ScrollMagic qui contient la fonctionnalité d'interpolation GSAP précédemment intégrée à ScrollMagic. Jan a également intégré velocity.js pour ceux qui ne souhaitent pas utiliser la fonctionnalité fournie par GSAP..
Un contrôleur est un moyen de «contrôler les scènes». C'est une classe nécessaire une fois par conteneur de défilement et écrite légèrement en 2.0..
Comparons maintenant la manière dont les contrôleurs sont instanciés, avec la manière dont ils étaient dans l'ancienne version:
contrôleur var = new ScrollMagic ();
contrôleur var = new ScrollMagic.Controller ();
La scène est l'emplacement de votre mouvement / animation. Il définit où le contrôleur doit réagir et comment. C'est aussi un autre exemple où la syntaxe a légèrement changé.
var scene = new ScrollScene (triggerElement: "# pinned-trigger", durée: $ (window) .height () - 100, triggerHook: 0, reverse: true) .setPin ("# pinned-element") .addTo (manette);var scene = new ScrollMagic.Scene (triggerElement: "# pinned-trigger", durée: $ (window) .height () - 100, triggerHook: 0, reverse: true) .setPin ("# pinned-element") .addTo (contrôleur);En parlant avec Jan Paepke, le créateur de ScrollMagic, j’ai appris un truc formidable qui vous fait gagner du temps et vous aide à migrer de votre ancien code ScrollMagic vers le nouveau.
ScrollMagic"Et remplacez la chaîne par"SM_TMP”Dans tous vos fichiers. ScrollScene" avec "ScrollMagic.Scene”.SM_TMP" avec "ScrollMagic.Controller”.Remarque: Assurez-vous de ne pas inclure les fichiers source de ScrollMagic dans votre recherche; appliquez-les uniquement à votre propre code. C'est une étape supplémentaire, mais elle est plus sécurisée, car il peut arriver que vous ayez des espaces avant les crochets..
Si vous avez besoin d'aide avec ScrollMagic, vous pouvez consulter ma collection CodePen utilisée pour la section WIKI du référentiel ScrollMagic. Le WIKI a aussi d'excellentes explications, ainsi que les démonstrations fournies dans la partie exemples du site officiel ScrollMagic:
Maintenant, créez des animations de défilement impressionnantes pour votre projet.!
