<h1>simpleParallaxデモ</h1>
    <h2>視差効果を大きくする
</h2>
<div class="box">
  <img class="thumbnail" src="https://pengi-n.co.jp/blog/wp-content/uploads/2024/01/penguin2.jpeg" alt="image">
</div>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1 , h2 {
  text-align: center;
}

h1 {
  margin-top: 30vh;
}

.box {
  border: 5px double #333;
  height: 50vw;
  margin: 100px auto 200px;
  overflow: hidden;
  width: 80%;
}

.thumbnail {
  width: 100%;
}
const image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
  scale: 1.5
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.2/dist/simpleParallax.min.js