<body>
<div class="title"><p class="text">スクロールしてみてね！</p></div>
<p class="text">flip</p>
<div class="container flip">
<div class="item" data-aos="flip-up">
<p class="item_text">flip-up</p>
<img
src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI"
alt=""
/>
</div>
<div class="item" data-aos="flip-down">
<p class="item_text">flip-down</p>
<img
src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI"
alt=""
/>
</div>
<div class="item" data-aos="flip-left">
<p class="item_text">flip-left</p>
<img
src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI"
alt=""
/>
</div>
<div class="item" data-aos="flip-right">
<p class="item_text">flip-right</p>
<img
src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI"
alt=""
/>
</div>
</div>
</body>
body {
background-color: #e9e9e9;
text-align: center;
}
.container {
overflow: hidden;
margin: 100px auto;
padding: 50px 0;
width: 100%;
height: auto;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
gap: 15rem;
}
.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(1.5rem, 3.5vw, 5rem);
font-weight: bold;
color: #333;
}
.item_text {
font-size: 2rem;
font-weight: bold;
}
img {
margin: 0 auto;
}
View Compiled
