<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);
-webkit-transform: translate(0,50px);
opacity: 0;
}
.scroll .up_anime {
transform: translate(0,0);
-webkit-transform: translate(0,0);
opacity: 1;
}
.scroll .side {
transform: translate(50px,0);
-webkit-transform: translate(50px,0);
opacity: 0;
}
.scroll .side_anime {
transform: translate(0,0);
-webkit-transform: translate(0,0);
opacity: 1;
}
$(function() {
$('.fade_in').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
$(this).addClass('fade_in_anime');
} else { $(this).removeClass('fade_in_anime');
}
});
$('.up').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
$(this).addClass('up_anime');
} else {
$(this).removeClass('up_anime');
}
});
$('.side').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
$(this).addClass('side_anime');
} else {
$(this).removeClass('side_anime');
}
});
});
This Pen doesn't use any external CSS resources.