<body>
<div class="title">
<p class="text">スクロールしてね ※data-aos-mirror</p>
</div>
<div class="container">
<div class="item" data-aos="fade">
<p class="item_text">fade<br></p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<p class="text">↓上方向スクロールでも発火↓</p>
<div class="item" data-aos="fade" data-aos-once="true">
<p class="item_text">fade<br>data-aos-once="true"</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="fade" data-aos-mirror="true">
<p class="item_text">fade <br><br>data-aos-mirror="false"</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<p class="text">↑上方向スクロールでも発火↑</p>
<div class="item" data-aos="fade">
<p class="item_text">fade<br></p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="fade">
<p class="item_text">fade<br></p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<p class="text">上にスクロールしてね</p>
</div>
</body>
body {
background-color: #e9e9e9;
text-align: center;
}
.container {
overflow: hidden;
margin: 0 auto;
padding: 50px 0;
width: 100%;
height: auto;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
gap: 5rem;
}
.item {
margin: 15px;
width: 80%;
height: auto;
color: #212121;
font-size: 0.2em;
background-color: #fff;
}
.title {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.text {
font-size: clamp(2rem, 3vw, 5rem);
font-weight: bold;
color: #333;
}
.item_text {
font-size: 1rem;
font-weight: bold;
}
img {
margin: 0 auto;
object-fit: cover;
}
View Compiled
