Parallax

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

Default Options

defaults: {
  inner: {
    factor: {
      x: 0,
      y: 0
    },
    translate: {
      from: {
        x: 0,
        y: 0,
      },
      to: {
        x: 0,
        y: 0,
      },
    },
    scale: {
      from: false,
      to: false
    },
    rotate: {
      from: false,
      to: false
    },
    matchMedia: false
  },
  outer: false
}

HTML Markup

Simple Parallax Background

<div
  class="parallax overflow-hidden h-800 js-parallax"
  data-arts-component-name="Parallax"
  data-arts-component-options='{"inner": {"factor": {"y": 0.2}}}'
>
  <img
    class="lazy of-cover-absolute js-parallax__inner"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E"
    decoding="async"
    data-src="img/assets/postsPortfolio/project08/08-cover-1-landscape.jpg"
    width="1920"
    height="1280"
    alt=""
  />
</div>

Outer and Inner Parallax

<div
  class="js-parallax"
  data-arts-component-name="Parallax"
  data-arts-component-options='{"inner": {"factor": {"y": 0.15}}, "outer": {"matchMedia": "(min-width: 992px)", "translate": {"from": {"y": "10%"}, "to": {"y": "-10%"}}}}'
>
  <div class="w-33 overflow-hidden js-parallax__outer">
    <img
      class="lazy of-contain js-parallax__inner"
      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3C/svg%3E"
      decoding="async"
      data-src="img/assets/section/sectionAbout/about-01.jpg"
      width="1024"
      height="1536"
      alt=""
    />
  </div>
</div>