CINXE.COM
Locomotive Scroll | Detection of elements in viewport & smooth scrolling with parallax effects.
<!doctype html> <html class="is-smooth-scroll-compatible is-loading" lang="en"> <head> <meta charset="utf-8"> <title>Locomotive Scroll | Detection of elements in viewport & smooth scrolling with parallax effects.</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff"> <link rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" sizes="152x152" href="dist/images/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="dist/images/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="dist/images/favicons/favicon-16x16.png"> <link rel="mask-icon" href="dist/images/favicons/safari-pinned-tab.svg" color="#000000"> <link rel="stylesheet" href="dist/styles/main.css"> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-144274538-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-144274538-1'); </script> </head> <body> <div class="o-scroll" id="js-scroll" data-scroll-container> <div data-scroll-section> <div class="o-container"> <header class="c-header" id="header"> <div class="c-header_heading" data-scroll data-scroll-speed="-8" data-scroll-position="top" data-scroll-target="#header" data-scroll-repeat> <div class="o-layout"> <div class="o-layout_item u-1/2" data-scroll data-scroll-direction="horizontal" data-scroll-speed="-2" data-scroll-position="top" data-scroll-target="#header"> <span class="u-label c-header_heading_label"> <a href="https://locomotive.ca" target="_blank" rel="noopener noreferrer"> Locomotive.ca </a> </span> </div> <div class="o-layout_item u-1/2" data-scroll data-scroll-direction="horizontal" data-scroll-speed="2" data-scroll-position="top" data-scroll-target="#header"> <div class="u-text-right"> <p class="u-label c-header_heading_label"> v4.x – Edition </p> </div> </div> </div> </div> <h1 class="c-header_title o-h1" data-scroll> <span class="c-header_title_line"> <span data-scroll data-scroll-speed="3" data-scroll-position="top">Locomotive</span> </span> <span class="c-header_title_line"> <span data-scroll data-scroll-speed="2" data-scroll-position="top">Scroll</span> </span> <span class="c-header_title_line -version u-white"> <span class="o-h1" data-scroll data-scroll-speed="3" data-scroll-position="top" data-scroll-delay="0.05">v</span><span class="o-h1" data-scroll data-scroll-speed="5" data-scroll-position="top" data-scroll-delay="0.05">4</span><span class="o-h1" data-scroll data-scroll-speed="2" data-scroll-position="top" data-scroll-delay="0.05">.</span><span class="o-h1" data-scroll data-scroll-speed="4" data-scroll-position="top" data-scroll-delay="0.05">X</span> </span> </h1> <hr class="c-header_line" data-scroll data-scroll-offset="100" /> <a class="c-header_logo" href="https://locomotive.ca" target="_blank"> <svg role="img"><use xlink:href="dist/images/sprite.svg#logo"></use></svg> </a> </header> </div> </div> <section data-scroll-section> <div class="o-container"> <div class="c-summary" data-scroll> <div class="o-layout -gutter"> <div class="o-layout_item u-2/5@from-medium"> <p class="c-summary_text"> A simple scroll library used by developers at Locomotive. Built as a layer on top of <em>ayamflow's</em> <a href="https://github.com/ayamflow/virtual-scroll" target="_blank">virtual-scroll</a>, it provides smooth scrolling with support for parallax effects, toggling classes, and triggering event listeners when elements are in the viewport. </p> </div> <div class="o-layout_item u-3/5@from-medium"> <ul class="c-summary_list"> <li class="c-summary_list_item u-label" data-scroll> <a href="#speed-control" data-scroll-to> 01. Speed Control <span class="c-summary_list_icon u-icon"> ↓ </span> </a> </li> <li class="c-summary_list_item u-label" data-scroll> <a href="#scroll-direction" data-scroll-to> 02. Scroll direction <span class="c-summary_list_icon u-icon"> ↓ </span> </a> </li> <li class="c-summary_list_item u-label" data-scroll> <a href="#lerp-effect" data-scroll-to> 03. Lerp effect <span class="c-summary_list_icon u-icon"> ↓ </span> </a> </li> <li class="c-summary_list_item u-label" data-scroll> <a href="#fixed-elements" data-scroll-to> 04. Fixed Elements <span class="c-summary_list_icon u-icon"> ↓ </span> </a> </li> </ul> </div> </div> </div> </div> </section> <section class="c-section" data-scroll-section> <div class="o-container" id="speed-control"> <div class="o-layout -gutter"> <div class="o-layout_item u-2/5@from-medium"> <div class="c-section_infos -padding" data-scroll data-scroll-speed="-2" data-scroll-call="test"> <div class="c-section_infos_inner" data-scroll data-scroll-offset="200"> <h3> 01. <br> Speed control </h3> <div class="c-sections_infos_text u-text"> <p> Each element can be animated at a different speed. You get to choo-choo-choose! </p> </div> </div> </div> </div> <div class="o-layout_item u-3/5@from-medium"> <div class="c-speed-block" data-scroll data-scroll-speed="2"> <div class="o-image_wrapper" data-scroll data-scroll-call="dynamicBackground" data-scroll-repeat> <div class="o-image" data-scroll> <img class="c-speed-block_image" src="dist/images/locomotive01.jpg" alt="Locomotive image from unsplash"> </div> </div> <p class="c-speed-block_title" data-scroll> Speed x2 </p> <span class="c-speed-block_bubble" data-scroll data-scroll-speed="4" data-scroll-call="dynamicColor" data-scroll-repeat> 4x </span> </div> </div> </div> <div class="o-layout -gutter -bottom"> <div class="o-layout_item u-2/5@from-medium"> <div class="c-speed-block" data-scroll data-scroll-speed="4"> <div class="o-image_wrapper" data-scroll data-scroll-call="dynamicBackground" data-scroll-repeat> <div class="o-image" data-scroll data-scroll-speed="-1.5"> <img class="c-speed-block_image" src="dist/images/locomotive02.jpg" alt="Locomotive image from unsplash"> </div> </div> <p class="c-speed-block_title" data-scroll> Speed x4 </p> <span class="c-speed-block_bubble -right" data-scroll data-scroll-speed="1" data-scroll-call="dynamicColor" data-scroll-repeat> 1x </span> <span class="c-speed-block_bubble -left -bottom" data-scroll data-scroll-speed="3" data-scroll-call="dynamicColor" data-scroll-repeat> 3x </span> </div> </div> <div class="o-layout_item u-3/5@from-medium"> <div class="o-layout u-text-right"> <div class="o-layout_item u-1/2@from-medium"> <div class="c-speed-block -margin" data-scroll data-scroll-speed="6"> <div class="o-image_wrapper" data-scroll data-scroll-call="dynamicBackground" data-scroll-repeat> <div class="o-image" data-scroll data-scroll-speed="-2"> <img class="c-speed-block_image" src="dist/images/locomotive03.jpg" alt="Locomotive image from unsplash"> </div> </div> <p class="c-speed-block_title" data-scroll> Speed x6 </p> <span class="c-speed-block_bubble -left -top" data-scroll data-scroll-speed="2" data-scroll-call="dynamicColor" data-scroll-repeat> 2x </span> <span class="c-speed-block_bubble -right" data-scroll data-scroll-speed="6" data-scroll-call="dynamicColor" data-scroll-repeat> 6x </span> <span class="c-speed-block_bubble -left -bottom" data-scroll data-scroll-speed="9" data-scroll-call="dynamicColor" data-scroll-repeat> 9x </span> </div> </div> </div> </div> </div> </div> </section> <section class="c-section" data-scroll-section> <div class="o-container" id="scroll-direction"> <div class="c-direction-block_wrapper"> <div class="c-section_infos -padding" data-scroll data-scroll-sticky data-scroll-target="#scroll-direction"> <div class="c-section_infos_inner" data-scroll> <h3> 02. <br> Scroll direction </h3> <div class="c-sections_infos_text u-text"> <p> And if that wasn't enough, make 'em go backwards. Or upwards. Or downwards! </p> </div> </div> </div> <div class="c-direction-block" id="direction"> <div class="c-direction-block_item -one"> <span class="c-direction-block_item_inner" data-scroll data-scroll-direction="horizontal" data-scroll-speed="6" data-scroll-target="#direction"> I'm moving in this direction </span> </div> <div class="c-direction-block_item -two"> <span class="c-direction-block_item_inner" data-scroll data-scroll-direction="horizontal" data-scroll-speed="-8" data-scroll-target="#direction"> And in this direction </span> </div> <div class="c-direction-block_item -three"> <span class="c-direction-block_item_inner" data-scroll data-scroll-direction="horizontal" data-scroll-speed="9" data-scroll-target="#direction" data-scroll-delay="0.05"> Sooo customizable. Right? </span> </div> <div class="c-direction-block_item -four"> <span class="c-direction-block_item_inner" data-scroll data-scroll-direction="horizontal" data-scroll-speed="15" data-scroll-target="#direction"> I can also go in this direction </span> </div> <div class="c-direction-block_item -five"> <span class="c-direction-block_item_inner" data-scroll data-scroll-direction="horizontal" data-scroll-speed="-20" data-scroll-target="#direction" data-scroll-delay="0.05"> Ok, enough!!!! </span> </div> </div> </div> </div> </section> <section class="c-section" data-scroll-section> <div class="o-container" id="lerp-effect"> <div class="o-layout"> <div class="o-layout_item u-2/5@from-medium"> <div class="c-section_infos" data-scroll> <div class="c-section_infos_inner" data-scroll data-scroll-offset="200"> <h3> 03. <br> Lerp elements </h3> <div class="c-sections_infos_text u-text"> <p> Stagger those smooth animations using delays to create a rushing or dragging effect. </p> </div> </div> </div> </div> <div class="o-layout_item u-3/5@from-medium"> <div class="c-lerp-block"> <span class="c-lerp-block_index" data-scroll data-scroll-delay="0.2" data-scroll-speed="6" data-scroll-call="dynamicColor" data-scroll-repeat> 01 </span> <span class="c-lerp-block_title" data-scroll data-scroll-delay="0.6" data-scroll-speed="6"> <span> I have a lerp </span> </span> </div> <div class="c-lerp-block"> <span class="c-lerp-block_index" data-scroll data-scroll-delay="0.06" data-scroll-speed="6" data-scroll-call="dynamicColor" data-scroll-repeat> 02 </span> <span class="c-lerp-block_title" data-scroll data-scroll-delay="0.1" data-scroll-speed="6"> <span> Me too! <br> And even more </span> </span> </div> <div class="c-lerp-block"> <span class="c-lerp-block_index" data-scroll data-scroll-delay="0.06" data-scroll-speed="6" data-scroll-call="dynamicColor" data-scroll-repeat> 03 </span> <span class="c-lerp-block_title" data-scroll> <span data-scroll data-scroll-delay="0.13" data-scroll-speed="6">B</span> <span data-scroll data-scroll-delay="0.12" data-scroll-speed="6">y</span> <span data-scroll data-scroll-delay="0.11" data-scroll-speed="6"> </span> <span data-scroll data-scroll-delay="0.1" data-scroll-speed="6">L</span> <span data-scroll data-scroll-delay="0.09" data-scroll-speed="6">e</span> <span data-scroll data-scroll-delay="0.08" data-scroll-speed="6">t</span> <span data-scroll data-scroll-delay="0.07" data-scroll-speed="6">t</span> <span data-scroll data-scroll-delay="0.06" data-scroll-speed="6">e</span> <span data-scroll data-scroll-delay="0.05" data-scroll-speed="6">r</span> </span> </div> <div class="c-lerp-block"> <span class="c-lerp-block_index" data-scroll data-scroll-delay="0.03" data-scroll-speed="6" data-scroll-call="dynamicColor" data-scroll-repeat> 04 </span> <span class="c-lerp-block_title" data-scroll data-scroll-delay="0.04" data-scroll-speed="6"> <span> Soooo smooooth </span> </span> </div> </div> </div> </div> </section> <section class="c-section -fixed" data-scroll-section data-persistent> <div class="o-container" id="fixed-elements"> <div class="o-layout"> <div class="o-layout_item u-2/5@from-medium"> <div class="c-section_infos -padding" data-scroll data-scroll-sticky data-scroll-target="#fixed-elements"> <div class="c-section_infos_inner" data-scroll data-scroll-offset="200"> <h3> 04. <br> Fixed elements </h3> <div class="c-sections_infos_text u-text"> <p> Create slides that stick and untick to the viewport while scrolling through. </p> </div> </div> </div> </div> <div class="o-layout_item u-3/5@from-medium"> <div class="c-fixed_wrapper" data-scroll data-scroll-call="dynamicBackground" data-scroll-repeat> <div class="c-fixed_target" id="fixed-target"></div> <div class="c-fixed" data-scroll data-scroll-sticky data-scroll-target="#fixed-target" style="background-image:url('dist/images/locomotive04.jpg')"></div> </div> </div> </div> </div> </section> <section class="c-section" data-scroll-section> <div class="o-container"> <div class="c-cta"> <h1 class="o-title" data-scroll> <span class="o-title_line"> <span>If you</span> </span> <span class="o-title_line"> <span>Enjoyed</span> </span> <span class="o-title_line u-white"> <span>Scrolling</span> </span> </h1> <hr class="c-cta_line" data-scroll data-scroll-offset="100"/> <div class="c-cta_content"> <div class="o-layout -gutter"> <div class="o-layout_item u-2/5@from-medium"> <p class="u-label"> Github </p> </div> <div class="o-layout_item u-3/5@from-medium"> <div class="c-cta_section"> <div class="c-cta_content_text" data-scroll data-scroll-offset="100"> <h3>Check out Locomotive Scroll</h3> <p> This library has evolved considerably over the years. The architecture and conventions shift according to our projects. </p> <p> Visit the GitHub repository page for a complete introduction and list of available options. Search the GitHub issue tracker carefully to check if your issue/feature has already been reported/requested before opening a new issue or submitting a pull request. </p> </div> <a class="c-cta_button o-button" href="https://github.com/locomotivemtl/locomotive-scroll" target="_blank" data-scroll data-scroll-offset="100"> <span class="o-button_icon"> <svg role="img"><use xlink:href="dist/images/sprite.svg#github"></use></svg> </span> Check on Github <span class="o-button_arrow u-icon"> → </span> </a> </div> <hr class="c-cta_line -margin" data-scroll data-scroll-offset="100"/> <div class="c-cta_section"> <div class="c-cta_content_text" data-scroll data-scroll-offset="100"> <h4>Neue Montreal <br>Pangram Pangram® Foundry</h4> <p> You like the font used on this page? Well this is your lucky day. You can get it on <a class="o-link -underline" href="https://pangrampangram.com/" target="_blank">pangrampangram.com</a>! Thanks to our good friend Mathieu Desjardins ❤️ </p> </div> </div> </div> </div> </div> </div> </div> </section> <section data-scroll-section> <div class="c-choochoo"> <div class="c-choochoo_item u-text-center" data-scroll data-scroll-direction="horizontal" data-scroll-speed="10"> <span> 🚂 </span> </div> <div class="c-choochoo_item u-text-center -reverse" data-scroll data-scroll-direction="horizontal" data-scroll-speed="-10"> <span> 🚂 </span> </div> </div> </section> <section data-scroll-section> <div class="o-container"> <div class="c-damn"> <h1 class="o-title" data-scroll> <span class="o-title_line"> <span> Damn </span> </span> <span class="o-title_line"> <span> You really </span> </span> <span class="o-title_line"> <span> like to </span> </span> <span class="o-title_line u-white"> <span> scroll </span> </span> </h1> </div> </div> </section> </div> <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script> <script nomodule src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script> <script src="dist/scripts/main.js"></script> </body> </html>