本記事では、jQueryのプラグインであるinview.jsとCSSのライブラリとして広く扱われているanimate.cssを用いたスクロールアニメーションの実装方法についてご紹介させて頂いております。手順を覚えてしまえば誰でも扱える便利なものになりますので、サイト制作などの参考になれば幸いです。
以下、今回作成するサンプルのDEMOになります。
✅ スクロールアニメーションの実装方法
始める前に
inview.jsとは??
画面をスクロールしていき、特定の要素が画面上に表示されるタイミングでイベントを起こしてくれるjQueryのプラグインの一つであり、実際に開始されるイベントとしては、スクロールアニメーションの実行になります。
今回ご紹介する方法では、ダウンロードする必要はありませんが、以下、必要なファイルなどのダウンロード先になりますので参考までに共有致します。
animate.cssとは??
フェードインやズームアップなどを含む様々なアニメーションを実装することのできるCSSライブラリになります。
公開されているCSSファイルを読み込むことで簡単に使用することが可能であり、今回は、inview.jsと組み合わせて利用していきます。
以下、公式ページになります。
ベースとなるHTMLを作成
今回、使用するファイルの名前は、以下のようにします。
inview_sample.html ・・ HTML
inview_sample.css ・・・ CSS
※ JSファイルについては今回は作成せず、HTMLファイル内に記述するものとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>inview_sample</title>
</head>
<body>
<div class="target_ue">↓ 下へスクロール</div>
<main>
<h1 class="target">inview.js & animate.css</h1>
<br>
<div>
<img class="img_01 " src="img/0FDA996F-D42D-458A-9841-A99DF16C4AD2.jpeg">
<img class="img_02" src="img/8F2EECC9-6FCE-4686-A413-A3C232A1AEA7.jpeg">
</div>
</main>
<div class="target_sita"></div>
<script type="text/javascript">
<!-- ここにjavaScriptを記述 -->
</script>
</body>
</html>
body {
margin: 0;
padding: 0;
}
.target, .img_01, .img_02 {
opacity: 0;
}
.target_ue {
width: 100%;
height: 720px;
font-size: 60px;
padding-top: 100px;
text-align: center;
}
.target_sita {
width: 100%;
height: 200px;
}
.target {
width: 100%;
text-align: center;
padding: 30px;
margin-top: 30px;
}
div {
width: 100%;
display: flex;
justify-content: space-around;
}
img {
width: 45%;
height: 450px;
}
実行してみた際に以下のようになっていればOKです。
画面サイズによっては、画像が横長になったり、縦長になリますので、表示されているものが同じであれば、先に進んで頂いて大丈夫です。
~
必要なファイルを読み込む
ベースとなるHTMLファイルとCSSファイルを作成し終えましたので、次は、inview.jsとanimate.cssを扱っていくために必要なファイルをjQueryも含めて、読み込んでいきます。 animate.cssに関するものをHTMLファイルのhead要素内に、jQueryとinview.jsに関するファイルは、HTMLファイルの18行目の上に追加しましょう。
<!-- animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- jQuery読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- inview.js -->
<script src="https://blog.appsol-one.com/custom/752_inview/jquery.inview.js"></script>アニメーション用のclass : cssの追加
今回、アニメーションを適用していくのは、HTMLの10行, 13,14行目になります。
ただ、どんなアニメーションを適用させるかの設定は、まだ行っておりませんので、以下のコードをCSSファイルの末尾に追加しましょう。ここでは、該当する要素にどのようなアニメーションを設定するかを指定します。
/* アニメーション関連 */
.backInLeft{
// アニメーションの種類
animation:backInLeft;
// アニメーションが終了するまでの時間
animation-duration: 1s;
}
.ab_left {
animation:fadeInLeft;
animation-duration: 2s;
}
.ab_right {
animation:fadeInRight;
animation-duration: 2s;
}
/* */JavaScriptコードの記述
続きまして、inview.jsを動かすに必要なJavaScriptをHTMLファイル内のの箇所に記述していきます。
$(function(){
$('.target').on('inview', function(event, isInView) {
if (isInView) {
// アニメーションの設定 (CSSで設定したもの)
$(this).addClass('backInLeft');
// 要素が見えるようにする
$(this).css({'opacity':'1'});
}
});
$('.img_01').on('inview', function(event, isInView) {
if (isInView) {
$(this).addClass('ab_left');
$(this).css({'opacity':'1'});
}
});
$('.img_02').on('inview', function(event, isInView) {
if (isInView) {
$(this).addClass('ab_right');
$(this).css({'opacity':'1'});
}
});
});
DEMO
正しく動作していると10行目の文字列と13,14行目の画像までスクロールした際にアニメーション付きで表示されます。動作確認は以下の、DEMOよりご確認ください。
コメント