Horizontal Scrolling

Markup

<section
  class="section section-fullheight section-content section-fullscreen-columns section-horizontal-scroll js-section-horizontal-scroll bg-light-1"
  data-arts-horizontal-scroll="container"
  data-arts-horizontal-scroll-type="modular"
  data-arts-horizontal-scroll-toggle-class="in-view"
>
  <div 
    class="section__content section-horizontal-scroll__wrapper"
    data-arts-horizontal-scroll="wrapper"
  >
    <div class="d-flex flex-wrap flex-lg-nowrap w-100vw h-lg-100vh-fix-bar">
      <div 
        class="section-fullscreen-columns__header d-flex flex-wrap col-lg-6 pt-xlarge pb-large container-fluid"
        data-arts-horizontal-scroll="section"
      >
        ...
      </div>
    </div>
  </div>
</section>

Elements

• data-arts-horizontal-scroll="container" – outer element for the horizontal scrolling scene.
• data-arts-horizontal-scroll="wrapper" – wrapper element which will be translated. Works only with the wrapper scrolling type.
• data-arts-horizontal-scroll="section" – inner elements which will be translated one-by-one. Works only with the modular scrolling type.

Attributes

• data-arts-horizontal-scroll="container" – outer element for the horizontal scrolling scene.
• data-arts-horizontal-scroll-type="[wrapper | modular]" – translating the long container may degrade the page rendering performance. Choose modular to translate only visible sections with improved performance. Choose wrapper when you have multiple horizontal scrolling sections on a page.
• data-arts-horizontal-scroll-toggle-class="[in-view | class]" – optional class applied to inner sections (data-arts-horizontal-scroll="section") when they become in view. Works only with the modular scroll type.

Showcase

• 📄 007-portfolio-horizontal-scrolling-columns-1.html
• 📄 008-portfolio-horizontal-scrolling-columns-2.html
• 📄 013-portfolio-details-masthead-boxed-horizontal.html
• 📄 019-portfolio-details-masthead-boxed-horizontal.html