<body>
<div class="title">
<p class="text">スクロールしてみてね！</p>
</div>
<p class="text">zoom</p>
<div class="container zoom">
<div class="item" data-aos="zoom-in">
<p class="item_text">zoom-in</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="zoom-in-up">
<p class="item_text">zoom-in-up</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="zoom-in-down">
<p class="item_text">zoom-in-down</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="zoom-in-left">
<p class="item_text">zoom-in-left</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="zoom-in-right">
<p class="item_text">zoom-in-right</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="zoom-out">
<p class="item_text">zoom-out</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="zoom-out-up">
<p class="item_text">zoom-out-up</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="zoom-out-down">
<p class="item_text">zoom-out-down</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="zoom-out-left">
<p class="item_text">zoom-out-left</p>
<img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" />
</div>
<div class="item" data-aos="zoom-out-right">
<p class="item_text">zoom-out-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
