<h1>スクロールテスト</h1>
<p>スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
</p>
<ul class="scroll">
<li class="fade_in"><figure>
<figcaption>フェードイン</figcaption>
<img src="https://www.instagram.com/p/Bg3qtU9ls-A/media/?size=l">
</figure></li>
<li class="up"><figure>
<figcaption>上に移動</figcaption>
<img src="https://www.instagram.com/p/Bg3qtU9ls-A/media/?size=l">
</figure></li>
<li class="side"><figure>
<figcaption>横に移動</figcaption>
<img src="https://www.instagram.com/p/Bg3qtU9ls-A/media/?size=l">
</figure></li>
<p>スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
スクロールしてください<br>
</p>
</ul>
h1, p {
text-align: center;
}
.scroll {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 0;
}
.scroll li {
list-style: none;
transition: 0.5s;
margin: 0 0 50px;
}
.scroll img {
width: 100%;
margin: 10px 0 0 ;
}
.scroll figcaption {
text-align: center;
}
.scroll .fade_in {
opacity: 0;
}
.scroll .fade_in_anime {
opacity: 1;
}
.scroll .up {
transform: translate(0,50px);
opacity: 0;
}
.scroll .up_anime {
transform: translate(0,0);
opacity: 1;
}
.scroll .side {
transform: translate(50px,0);
opacity: 0;
}
.scroll .side_anime {
transform: translate(0,0);
opacity: 1;
}
This Pen doesn't use any external CSS resources.