Slider Fullpage Backgrounds [Mask]

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

Default Options

const defaults = {
  webGL: {
    enabled: false,
    watchScroll: 'auto',
    vertices: 16,
    transitionEffect: 3
  },
  textTransitionDirection: 'auto',
  preventScroll: false,
  mouse: true,
  keyboard: true,
  controls: true,
  loop: true,
  autoplay: 6,
  scaleInner: 1.0,
  scaleOuter: 1.0,
  shapeSize: 57.5,
  shapeSizeTransition: 17.5,
  transitionDuration: 1.2,
  direction: 'horizontal',
  itemIdAttribute: 'data-post-id'
};

HTML Markup

<div
  class="slider-fullpage-backgrounds js-slider-fullpage has-curtains"
  data-arts-component-name="SliderFullpageBackgroundsMask"
  data-arts-component-options="{}"
  data-arts-os-animation="true"
>
  <!-- <canvas> element for webGL effects will be placed here -->
  <div class="canvas-wrapper"></div>
</div>