# 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 wrapper scrolling type.
  • data-arts-horizontal-scroll="section" – inner elements which will be translated one-by-one. Works only with 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 the 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 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