Marquee Header

Customization	Reference
HTML selector	🔧 [data-arts-component-name="MarqueeHeader"]
Component source	📄 HTML/js/components/MarqueeHeader.js
Component source (gulp)	📄 SOURCE/components/marqueeHeader/MarqueeHeader.js

Default Options

defaults: {
  loop: true,
  speed: 0.5,
  onHoverSpeed: 0.1,
  onScrollSpeed: false,
  onScrollInverseDirection: false,
  delimiter: '  /  '
}

HTML Markup

<div
  class="marquee-header js-marquee-header"
  data-arts-component-name="MarqueeHeader"
  data-arts-component-options="{}"
  data-arts-os-animation="true"
>
  <div class="marquee-header__inner js-marquee-header__wrapper">
    <div class="marquee-header__lane js-marquee-header__list-lane" data-arts-infinite-list-options="{inverse: false}" data-arts-os-animation-name='animatedRevealBottom'>
      <div class="marquee-header__item d-inline-block js-marquee-header__list-item">
        <h2 class="h3 js-marquee-header__label">Featured Works</h2>
      </div>
    </div>
  </div>
  <div class="marquee-header__inner js-marquee-header__wrapper">
    <div class="marquee-header__lane js-marquee-header__list-lane" data-arts-infinite-list-options="{inverse: true}" data-arts-os-animation-name='animatedRevealBottom'>
      <div class="marquee-header__item d-inline-block js-marquee-header__list-item">
        <div class="h3 js-marquee-header__label">Featured Works</div>
      </div>
    </div>
  </div>
  <div class="marquee-header__inner js-marquee-header__wrapper">
    <div class="marquee-header__lane js-marquee-header__list-lane" data-arts-infinite-list-options="{inverse: false}" data-arts-os-animation-name='animatedRevealBottom'>
      <div class="marquee-header__item d-inline-block js-marquee-header__list-item">
        <div class="h3 js-marquee-header__label">Featured Works</div>
      </div>
    </div>
  </div>
</div>