<body>
<div class="container">
<p class="text">option <br> イージングタイプ</p>
</div>
<div class="container">
<div class="item" data-aos="slide-left" data-aos-easing="linear">
linear
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="slide-left" data-aos-easing="ease-out">
ease-out
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="slide-left" data-aos-easing="ease-out-back">
ease-out-back
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="slide-left" data-aos-easing="ease-in-out-sine">
ease-in-out-sine
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="slide-left" data-aos-easing="ease-out-quad">
ease-out-quad
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="slide-left" data-aos-easing="ease-in-cubic">
ease-in-cubic
<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;
}
.container {
overflow: 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;
margin: 45vh 0;
}
.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
