【CSS/JS】スクロールに合わせてコンテンツをふわっと下から表示
目次
スクロールしてコンテンツが表示領域に入ったら、コンテンツの内容が下からフワ～っとアニメーション効果付きで表示されるやる。
Waypoints.js & Animate.css
Waypoints.jsとAnimate.cssを併用して実現します。Waypoints.jsはjQueryが必要です。
Waypoints.js
指定したHTML要素が画面内へ入った際、あらかじめ指定した関数を呼び出してくれます。
上記のページのダウンロードボタンからダウンロードZIPを展開し、「libフォルダ」内のjquery.waypoints.jsまたはjquery.waypoints.min.jsを読み込んで使用します。
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <script src="jquery.waypoints.min.js"></script>
リファレンス
Animate.css
HTML要素にクラスを指定するだけでアニメーションを付けてくれるCSSライブラリ。
ダウンロードしたzipファイルを解凍後、animate.cssまたはanimate.min.cssをHTMLの<head>内で読み込みます。
<link rel="stylesheet" href="animate.css">
ダウンロードページ
サンプルソース
HTML部分
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Animate Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
<style>
body {
background: repeating-linear-gradient(0deg,
#ffffff,
#ffffff 40px,
#ededed 40px,
#dedede 80px);
}
.boxes {
margin: 80vh auto;
}
.box {
border: 3px solid #666;
width: 10em;
padding: 10px;
margin: 4em auto;
text-align: center;
}
.animated {
/*最初は非表示*/
opacity: 0;
}
</style>
</head>
<body>
<div class="boxes">
<div class="box animated">box 01</div>
<div class="box animated">box 02</div>
<div class="box animated">box 03</div>
<div class="box animated">box 04</div>
<div class="box animated">box 05</div>
<div class="box animated">box 06</div>
<div class="box animated">box 07</div>
<div class="box animated">box 08</div>
<div class="box animated">box 09</div>
<div class="box animated">box 10</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script src="main.js"></script>
</body>
</html>
Javascript部分
// animatedクラスの付いた要素にwaypointを登録
$('.animated').waypoint({
handler(direction) {
// 要素が画面中央に来るとここが実行される
if (direction === 'down') {
/*
* 下方向のスクロール
* イベント発生元の要素にfadeInUpクラスを付けてアニメーションを開始
*/
$(this.element).addClass('fadeInUp');
/*
* waypointを削除することで、この要素に対しては
* これ以降handlerが呼ばれなくなる
*/
this.destroy();
}
},
// 要素が画面中央に来たらhandlerを実行
offset: '50%',
});