fr en it fr fr en it fr en fr fr id es en fr en fr fr fr fr en fr fr fr es es en fr fr fr fr uk fr fr fr fr fr fr fr fr es fr fr fr fr fr fr fr fr fr fr fr fr fr fr en fr fr fr fr fr fr fr fr fr fr en fr fr fr fr fr fr fr fr fr es es en fr en fr fr en fr fr en fr fr fr fr fr fr fr en en en en en fr fr fr fr fr fr fr fr fr fr fr fr fr en it fr fr fr fr fr fr fr en it fr fr fr fr fr en it fr fr fr fr en it fr fr fr pt
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.
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?
Contrôle avancé sur les éléments
À 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.
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!)
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 :
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/
C'est hot, 2ieme édition
Locomotive Scroll, le bon outil pour mon projet? 12.01.2022 C'est hot, 2ieme édition 01.10.2021 500 jours plus tard, My Better Normal 24.09.2021 6 piliers de la culture de travail chez Locomotive 12.08.2021 Pourquoi nous n’utilisons pas de frameworks front-end à Locomotive? 22.07.2021 7 façons d'améliorer la communication avec le client 08.07.2021 C'est hot, 1re édition 17.06.2021 3 choses que votre concepteur UX peut apprendre de votre psy, style Locomotive 10.06.2021 Trois fois de suite, Locomotive est couronnée l'agence de l'année 23.02.2021 Locomotive prend d'assaut le stade IGA et remporte les honneurs au concours Idéa 24.09.2020 La révolution de l'espace de travail tel que nous le connaissons 03.09.2020 Puis-je te dire bravo? 15.04.2020 Locomotive couronnée Agence de l'année pour une deuxième année consécutive 21.02.2020 Analyse d'image et machine learning avec Google Vision API 05.02.2020 Réalité augmentée sur le web, wut? 15.01.2020 L’évolution du scroll chez Locomotive 09.12.2019 Revivez le Parté of the Year de Locomotive 03.06.2019 Les p'tits déjs Loco 11.05.2019 La zoothérapie au bureau 18.04.2019 Locomotive remporte le prix Agence de l'année 25.02.2019 Journée tempête et ski de fond 12.02.2019 Locomotive en mode avion 02.02.2019 Comment bâtir une équipe de rêve et la garder? 15.11.2018 Un bureau haut en couleurs saisonnières 18.10.2018 Les vendredis sous le soleil d'été 24.08.2018 Une équipe de rêve pour Locomotive 04.06.2018
Commencer un projet Commencer un projet Rejoindre l’équipe Rejoindre l’équipe Demander un stage Demander un stage Laisser un mot Laisser un mot À propos de Locomotive À propos de Locomotive
Site web complet Site web complet UX & design web UX & design web Image de marque Image de marque Image de marque & web Image de marque & web Campagne digitale Campagne digitale
50-75K50-75K 75-100K75-100K 100-150K100-150K 150K +150K + 1 million de dollars1 million de dollars
25-50K25-50K 50-75K50-75K 75-100K75-100K 100K +100K + 1 million de dollars1 million de dollars
15-30K15-30K 30-50K30-50K 50K +50K + 1 million de dollars1 million de dollars
50-75K50-75K 75-100K75-100K 100K +100K + 1 million de dollars1 million de dollars
30-50K30-50K 50-75K50-75K 75-100K75-100K 100K +100K + 1 million de dollars1 million de dollars
Stratège numérique Stratège numérique Gestionnaire de projets numériques Gestionnaire de projets numériques Stratège UX Stratège UX Directeur(trice) artistique Directeur(trice) artistique Développeur créatif front-end Développeur créatif front-end
Site web de prix Site web de prix Un projet à nous Un projet à nous Un article Un article Un ami Un ami Mot sur la rue Mot sur la rue
Choisir un ou plusieurs fichiers * Choisir un fichier
Vous pouvez téléverser jusqu'à 3 fichiers (ZIP, PDF, DOC ou DOCX). Chaque fichier doit peser moins de 12 Mo.
CV * Choisir un fichier
Stratège numérique Gestionnaire de projets numériques Stratège UX Directeur(trice) artistique Développeur créatif front-end