simpleParallax.jsの使い方

headに書くこと

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/simple-parallax-js@5.6.2/dist/simpleParallax.min.js"></script>

JavaScriptで書くこと

document.addEventListener("DOMContentLoaded", function () {
  const elem = document.querySelector(".js-target-parallax");
  if (elem !== null) {
    let target = document.getElementsByClassName("js-target-parallax"); 
    let parallaxConfig = {
      delay: 0,
      orientation: "down",
      //overflow: true,
      scale: 1.5   
    };

    const parallax_instance = new simpleParallax(target, parallaxConfig);
    
  }
});

CSSで書くこと

.d-demo__img{
  width: 100%;
  height: 20vw;
  min-height: 320px;
  overflow: hidden;
}

HTMLで書くこと

<div class="d-demo">
   <div class="d-demo__inner">
       <div class="d-demo__main">
            <div class="d-demo__img">
                  <img src="./images/img-demo-swiper01.jpg" alt class="js-target-parallax">
             </div>
             <div class="d-demo__img">
                  <img src="./images/img-demo-swiper02.jpg" alt class="js-target-parallax">
             </div>
             <div class="d-demo__img">
                  <img src="./images/img-demo-swiper03.jpg" alt class="js-target-parallax">
             </div>
        </div>
   </div>
</div>