<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);
This Pen doesn't use any external CSS resources.