Asli

# Marquee Headings Hover

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

# Default Options

defaults: {
  webGL: {
    enabled: false,
    vertices: 16
  },
  preventScroll: false,
  drag: {
    label: false,
    arrowsDistance: 45,
    scale: 1.2,
    hideNative: false,
    toggleClass: 'marquee-headings-hover_mouse-drag'
  },
  delimiter: '  /  ',
  direction: 'horizontal',
  matchMedia: false,
  onScrollRotatingButtonSpeed: 2,
  loop: true,
  autoCenterFirstItem: true,
  marquee: {
    speed: 0.6
  },
  scroll: app.options.virtualScroll,
  type: 'wheel,touch,pointer',
  toggleScrollingClass: 'marquee-headings-hover_scrolling',
  toggleDraggingClass: 'marquee-headings-hover_dragging',
  togglePressedClass: 'marquee-headings-hover_pressed',
  snapOnRelease: {
    keyboard: true,
    toggleActiveItemClass: 'active',
    removeActiveClassOnInteraction: false
  },
  wheelSpeed: -1,
  speedEffect: false,
  opacityEffect: false,
  currentClass: 'current',
  itemIdAttribute: 'data-post-id'
}

# HTML Markup

<div
  class="js-marquee-headings-hover"
  data-arts-component-name="MarqueeHeadingsHover"
  data-arts-component-options="{}"
  data-arts-os-animation="true"
  >
  ...
</div>

← Mask →