<body>
<div class="item trigger-right" data-aos="fade-left" data-aos-anchor="#trigger-right">
<p class="item_text">みぎからでてくるよ</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item trigger-left" data-aos="fade-right" data-aos-anchor="#trigger-left">
<p class="item_text">ひだりからでてくるよ</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<p class="text">option</p>
<div class="container">
<p class="text">data-aos-anchor</p>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div id="trigger-right" class="item">
<p class="item_text">trigger-right</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div id="trigger-left" class="item">
<p class="item_text">trigger-left</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
</div>
</body>
body {
background-color: #e9e9e9;
text-align: center;
overflow-x: hidden;
}
.item {
margin: 1rem auto;
width: 200px;
height: 200px;
color: #212121;
font-size: 0.2em;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}
.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;
width: 50%;
object-fit: contain;
}
.trigger-right {
position: fixed;
top: 0;
bottom: 0;
right: 20px;
background: #ff99cc;
margin: auto;
}
.trigger-left {
position: fixed;
top: 0;
bottom: 0;
left: 20px;
background: #6699ff;
margin: auto;
}
View Compiled
