Locomotive

Agence digitale

Le fun Retour au travail

Le fun

Retour aux articles

Locomotive Scroll, le bon outil pour mon projet?

Locomotive Scroll est l’un de nos outils les plus populaires. Une occasion pour nous de partager avec vous quelques conseils et réflexions pour utiliser cette librairie à bon escient sur votre projet.

Qu’est-ce que Locomotive Scroll?


Notre librairie se base sur le concept du « scroll-hijacking » pour livrer une expérience de défilement plus fluide de la page et permettre l’ajout d’animations poussées en fonction de ce dernier.

On parle de « scroll-hijacking » lorsque l’on prend le contrôle du défilement (scroll) natif du navigateur pour modifier son comportement : vitesse, sens du scroll, easing, délai ou encore arrêt et reprise du défilement. C’est donc un outil puissant pour personnaliser l’expérience de navigation et élargir les possibilités créatives.

En 2016, nous avons décidé de lancer le projet en open source. Ces jours-ci, on compte plus de 20 000 téléchargements par mois ! Pour connaître l’évolution complète du projet : The Evolution of Scrolling at Locomotive.

Est-ce le bon outil pour mon projet?

Connaître ses forces:

Une expérience fluidifiée

La première chose que l’on remarque en utilisant LS est la fluidité du scroll. Cela permet de rendre la navigation d’un site plus apaisante – presque cinématique – et joue un grand rôle dans l’expérience utilisateur. Pour des projets plus « expérientiels » qui visent à évoquer des émotions pendant leur consultation, le smooth-scroll ouvre des possibilités créatives et devient un outil phare.

Contrôle avancé sur les éléments

Grâce à LS, il est facile de déclencher beaucoup de choses à l’apparition d’un élément HTML dans le viewport : parallaxe, animation d’entrée/de sortie avec délai ou non, animations avancées progressives en fonction du scroll (avec GSAP par exemple), easing/lerp ou simplement le déclenchement d’actions sur d’autres parties du site. Ce contrôle avancé décuple les axes créatifs sur un projet et facilite le travail du développeur front-end pour donner vie à un projet.

Contrôle du scroll

À tout cela s’ajoute un contrôle accru du comportement de scroll: LS rend la création d’une page au défilement horizontal accessible et permet de stopper/reprendre le scroll aux abords d’une section, par exemple. Couplé au smooth-scroll et ses différents paramètres (easing/lerp) s’ajoute une harmonisation du scroll en fonction des devices ou des souris et autres trackpads.

Pour des projets plus « expérientiels » qui visent à évoquer des émotions pendant leur consultation, le smooth-scroll ouvre des possibilités créatives.

Communauté grandissante

Avec un nombre de téléchargements mensuels croissant vient une communauté de plus en plus impliquée et prête à aider les nouveaux adeptes de LS. Les sections « Issues » et « Pull-requests » de notre repository sont une mine d’informations parallèles au « Readme » si vous n’y trouvez pas l’information recherchée. Vous y trouverez notamment des conseils et des forks d’autres utilisateurs pour implémenter la librairie avec différents frameworks (nous ne pouvons malheureusement pas couvrir toutes les possibilités nous-mêmes).

Nous accueillons chaleureusement tous commentaires constructifs et propositions sur le projet! N’hésitez donc pas à partager vos réflexions sur le repository, nous en sommes friands. C’est très gratifiant pour nous de voir autant de personnes s’intéresser au projet et nous voulons vous en remercier grandement!

Sachant que le cœur de notre métier est la livraison de sites web à nos clients et que nous n’avons pas d’équipe dédiée uniquement à la maintenance de LS, nous ne pouvons promettre des mises à jour régulières et reposons donc en partie sur les utilisateurs pour aider à la résolution de bogues. C’est quand nous avons le temps, entre deux projets, que nous essayons de traiter les issues, pull-requests et suggestions de la communauté pour continuer d’améliorer LS. (N’hésitez pas à contribuer!)

Lire

K72

Connaître ses limites : Quand l’utiliser?

Avec tous ces avantages viennent tout de même certaines contraintes qu’il est bon de connaître pour s’assurer que la librairie est un bon choix pour son projet. 

Premièrement, cet outil requiert des connaissances de base avec JavaScript et n’est donc pas une solution idéale pour un néophyte. En effet, il est possible de créer des problèmes de performance d’affichage dans le cas d’une mauvaise configuration, il est donc important de comprendre le fonctionnement global de la librairie.

Aussi, Locomotive Scroll pourrait perturber les habitudes de l’utilisateur et limiter certaines fonctionnalités natives d’accessibilité, par exemple la fonction de recherche (CTRL/CMD + F) qui retourne le nombre de résultats mais ne peut pas scroller dans la page. Enfin, certains plugins tiers pourraient ne pas fonctionner correctement avec LS : notamment s’ils altèrent ponctuellement le DOM ou déclenchent des « scrollTo ».

Le sujet qui fâche

Le scroll hijacking est souvent considéré comme une mauvaise pratique. Il peut choquer ou perturber les habitudes des utilisateurs, être gourmand en performance et créer des soucis d’accessibilité. Autant de raisons de bien décider en amont du projet de l’utilisation ou non de LS.

Simplement, certains projets s’y prêtent mieux que d’autres et il faut savoir quand l’utiliser :

Pour un site de commerce en ligne par exemple, on veut généralement privilégier la conversion, la performance et l’expérience native du navigateur alors qu’un site plus expérientiel comme un portfolio d’agence nous pousserait à privilégier « l’effet wow » et à mettre en avant l’image de marque de manière innovante via des animations plus poussées. 

La cible du projet ainsi que ses contraintes d’accessibilité sont également décisives. Bien que nous essayions toujours de livrer l’expérience la plus accessible possible, certains projets ont des exigences plus poussées et requièrent plutôt l’utilisation du scroll natif.

Cela dit... Nous aimons voir les gens utiliser Locomotive Scroll dans leurs projets ! Bravo à tous ceux qui le font, y compris Ray-Ban Stories de Luxottica Creative Team. Leur site utilise Locomotive Scroll d'une manière cool avec une expérience de navigation horizontale impressionnante, comme vous pouvez le voir :

 

Lire

Ray-Ban Stories par Luxottica Creative Team

Un formidable outil de création

Nous pensons qu’il est possible de bien utiliser le scroll hijacking. C’est un formidable outil qui ouvre la porte à des projets plus créatifs et qui repousse les limites des expériences web. En ce sens, nous sommes heureux de continuer à développer Locomotive Scroll et à partager son évolution avec notre communauté!    

Voir ici : https://github.com/locomotivemtl/locomotive-scroll/

Retour aux articles
Locomotive Scroll, le bon outil pour mon projet? C'est hot, 2ieme édition 500 jours plus tard, My Better Normal 6 piliers de la culture de travail chez Locomotive Pourquoi nous n’utilisons pas de frameworks front-end à Locomotive? 7 façons d'améliorer la communication avec le client C'est hot, 1re édition 3 choses que votre concepteur UX peut apprendre de votre psy, style Locomotive Trois fois de suite, Locomotive est couronnée l'agence de l'année Locomotive prend d'assaut le stade IGA et remporte les honneurs au concours Idéa La révolution de l'espace de travail tel que nous le connaissons Puis-je te dire bravo? Locomotive couronnée Agence de l'année pour une deuxième année consécutive Analyse d'image et machine learning avec Google Vision API Réalité augmentée sur le web, wut? L’évolution du scroll chez Locomotive Revivez le Parté of the Year de Locomotive Les p'tits déjs Loco La zoothérapie au bureau Locomotive remporte le prix Agence de l'année Journée tempête et ski de fond Locomotive en mode avion Comment bâtir une équipe de rêve et la garder? Un bureau haut en couleurs saisonnières Les vendredis sous le soleil d'été Une équipe de rêve pour Locomotive
À propos de Locomotive À propos de Locomotive
C H O O C H O O