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>