様々な動きのパターンを集めたCSSライブラリ「Animate.css」と、要素が画面に入ったら動く「jquery.inview」というJavaScriptライブラリを組み合わせて、スクロールで手軽に要素を動かす方法を解説します。
See the Pen ライブラリを使って手軽に動かそう!(Animate.css×jquery.inview) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
Animate.css の導入方法
① Animate.css をHTML内head終了タグ直前に読み込む。
※PC をインターネットにつないでいないと動かないので注意。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
</head>
② 動かしたいアニメーションの種類をAnimate.cssの右画面から選択。
③ 動かしたいアニメーションが決まったら、動かしたい対象の要素に
animate__animated というクラス名(必ず付与するもの)と
animate__+アニメーションの種類のクラス名(例)animate__bounce の2つを追加。
(例)bounce というアニメーションを追加したい場合
<div class="animate__animated animate__bounce"></div>
See the Pen Animate.cssの導入方法 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
■指定した対象がインライン要素(例<span>タグなど)の場合はCSSでdisplay:block;を指定し、ブロック要素にしてから動かしましょう。
<NG例>https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/work/inline_ng/
<OK例>https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/work/inline_tagok/
■左右から出現するアニメーションは、出現時にブラウザ下に横スクロールバーが出ることがあります。
その際、親要素に「overflow-x:hidden;」をCSSで指定するとスクロールバーが出なくなります。
<NG例>https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/work/left_ng/
<OK例>https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/work/left_ok/
【動きの回数を指定する(CSS)】
■ 無限ループをさせたい場合
クラス名 animate__infinite をHTMLに追記すると無限ループします。
<div class="animate__animated animate__fadeInUp animate__infinite"></div>
■ 回数を自分で決めたい場合:自作のCSSを作り設定を行う。
1. オリジナルのクラス名(count2)をHTMLに追記。
<div class="animate__animated animate__fadeInUp count2"></div>
2.自作のCSSを作り、CSSフォルダに格納してからHTMLの内に読み込む。
※仮に名前を 3-1-1.cssとします
<link href="css/3-1-1.css" rel="stylesheet">
</head>
3. 2.で作ったCSS(3-1-1.css)の中に、1.で指定したクラス名( count2 )を書き、回数の指定を行う。
※今回は2回ループをさせる指定をしていますが、数字を変更することにより回数制御が可能。
.count2{
animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}
See the Pen Animate.css 動きの回数を指定したい(CSS) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
【動きのスタートを遅らせる(CSS)】
■ 1秒~5秒遅らせたい場合
クラス名 animate__delay-1s、animate__delay-2s、animate__delay-3s、animate__delay-4s、animate__delay-5s の5つから選択しHTMLに追記すると動きの始まりを1秒から5秒遅らせることができる。
<div class="animate__animated animate__fadeInUp animate__delay-1s"></div>
<!--delay-後の数字を1~5に変更すると遅延の秒数が変化-->
■ 遅延時間を自分で決めたい場合自作のCSSを作り設定を行う。
1. オリジナルのクラス名(delay-time)をHTMLに追記。
<div class="animate__animated animate__fadeInUp delay-time"></div>
2. 自作のCSSを作り、CSSフォルダに格納してからHTMLの内に読み込む。
※仮に名前を 3-1-1.cssとする。
<link href="css/3-1-1.css" rel="stylesheet">
</head>
3. 2.で作ったCSS(3-1-1.css)の中に、1.で指定したクラス名(delay-time)を書き、遅延時間の指定を行う。
※今回は0.5秒遅延させる指定をしていますが、数字を変更することにより回数制御が可能。
.delay-time{
animation-delay: 0.5s;/*この数字を指定したい遅延時間に変更*/
}
See the Pen Animate.css 動きのスタートを遅らせたい(CSS) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
【動きが変化する時間を指定する】
■ 遅い~速いまでの4段階の変化であればクラス名 animate__slow、animate__slower、animate__fast、animate__faster の4つから選択しHTMLに追記すると動きに変化がつく。
<div class="animate__animated animate__fadeInUp animate__slow"></div>
<!--アニメーションの変化のスピードが遅い-->
■ 変化の時間を自分で決めたい場合:自作のCSSを作り設定を行う。
1.オリジナルのクラス名(change-time) をHTMLに追記。
<div class="animate__animated animate__fadeInUp change-time"></div>
2. 自作のCSSを作り、CSSフォルダに格納してからHTMLの内に読み込む。
※ここでは仮に名前を 3-1-1.cssとする。
<link href="css/3-1-1.css" rel="stylesheet">
</head>
3. 2.で作ったCSS(3-1-1.css)の中に、1.で指定したクラス名( change-time )を書き、動きが変化する指定を行う。
※今回は4.5秒で変化する指定をしていますが、数字を変更することにより回数制御が可能。
.change-time{
animation-duration: 4.5s;/*この数字を変化させたい時間に変更*/
}
See the Pen Animate.css 動きが変化する時間を指定したい場合(CSS) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
jquery.inviewの導入方法
スクロールをして要素を動かすため、jquery.inviewというJavaScriptライブラリを読み込む。
① HTML内の動きをつけたい要素にきっかけの起点となるクラス名を付与。
※Class名は自由に設定可能。今回はふわっと出てくる動きをつけたいのでfadeInUpTriggerと指定。
※すでにClass名が記述されているものは、前に半角スペースを入れて追加しましょう。
<div class="box fadeInUpTrigger"></div>
② 自作のCSSを作り、CSSフォルダに格納してからHTMLの内に読み込む。
※ここでは仮に名前を 3-1-2.cssとする。
<link href="css/3-1-2.css" rel="stylesheet">
</head>
③ CSSの中に、1.で指定したクラス名( fadeInUpTrigger )を書き、非表示からスタートして表示させる透過0の指定を行う。
.fadeInUpTrigger{
opacity: 0;
}
④ </body>直前にjQueryとjquery.inview.js、自作のJavaScriptファイルの3つを読み込む。
※ここでは仮に名前を3-1-2.jsとする。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="js/3-1-2.js"></script> ←自作のJavaScript
</body>
⑤ JavaScriptファイル内に「動きのきっかけの起点となるクラス名fadeInUpTrigger」が画面に入ったらanimate__animated というクラス名(必ず付与するもの)と animate__+アニメーションの種類のクラス名(例)animate__fadeInUpがHTMLに付与される指定を書く。
$('.fadeInUpTrigger').on('inview', function(event, isInView) {
if (isInView) {//表示領域に入った時
$(this).addClass('animate__animated animate__fadeInUp');//クラス名が付与
} else {//表示領域から出た時
$(this).removeClass('animate__animated animate__fadeInUp');//クラス名が除去
}
});
■ スクロールをしたら1度だけアニメーションをさせたい場合
スクロールをするたびにアニメーションを行う設定内の
else {//表示領域から出た時
$(this).removeClass(‘animate__animated animate__fadeInUp’);//クラス名が除去
}
を削除すると1度だけアニメーションをする設定に変更できる。↓↓
$('.fadeInUpTrigger').on('inview', function(event, isInView) {
if (isInView) {//表示領域に入った時1度だけアニメーションをさせる
$(this).addClass('animate__animated animate__fadeInUp');//クラス名が付与
}
});
■ 違う動きを追加したい場合
動きのきっかけの起点となるクラス名を変えて、CSSやJavaScriptに動きの指定を追記する。
・HTMLの書き方
<div class="box fadeInUpTrigger"></div><!--1つめの動き-->
<div class="box fadeInDownTrigger"></div><!--2つめの動き-->
・CSSの書き方
.fadeInUpTrigger,
.fadeInDownTrigger{
opacity: 0;
}
・jQueryの書き方
//1つめの動き
$('.fadeInUpTrigger').on('inview', function(event, isInView) {
if (isInView) {//表示領域に入った時
$(this).addClass('animate__animated animate__fadeInUp');//クラス名が付与
} else {//表示領域から出た時
$(this).removeClass('animate__animated animate__fadeInUp');//クラス名が除去
}
});
//2つめの動き
$('.fadeInDownTrigger').on('inview', function(event, isInView) {
if (isInView) {//表示領域に入った時
$(this).addClass('animate__animated animate__fadeInDown');//クラス名が付与
} else {//表示領域から出た時
$(this).removeClass('animate__animated animate__fadeInDown');//クラス名が除去
}
});
See the Pen
jquery.inviewの導入 by 動くWebデザインアイディア帳 (@ugokuweb)
on CodePen.
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!