Webサイトを見ると最初に色が敷かれてから画像などが表示、そのあと敷かれた色は非表示に…というアニメーションをよく見かけると思います。
言葉にするとややこしいですが図にすると下のような感じです。
これは、CSSのアニメーショと少しのjsで対応できます。
早速作り方の詳細を見ていきましょう。
目次
実際にアニメーションを作ってみよう
とりあえず実際に作成したデモと、これから使用するコードをまとめておきます。DEMO
js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script> <script type="text/javascript" src="js/jquery.inview.min.js"></script> <script> $(function(){ $(".photoArea").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("move"); } }); }); </script> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
.photoArea figure { position: relative; display: inline-block; overflow: hidden; width: 720px; } .photoArea figure::before { content: ''; display: inline-block; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background: #00a0e9; } .photoArea.move figure::before { animation: barAnime forwards 1.5s 1 ease 0.1s normal; } .photoArea figure img { opacity: 0; transform: scale(1.1); } .photoArea.move figure img { animation: photoAnime forwards 1.5s 1 ease 0.5s normal; } @keyframes barAnime{ 0% { left: 0; width: 0; } 50% { left: 0; width: 100%; } 51% { left: 0; width: 100%; } 68% { left: 0; width: 100%; } 100% { left: 100%; width: 0; } } @keyframes photoAnime{ 0% { opacity: 0; transform: scale(1.1); } 50% { opacity: 0; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } |
HTML
|
1 2 3 4 5 |
<div class="photoArea"> <figure> <img src="images/img01.jpg" alt=""/> </figure> </div> |
上記のものを使用して解説していきます。
jqueryなどを読み込ませておく
js周りについては要素が領域に入ったらアニメーションを動かすために、『inview.js』というjQueryプラグインを使用します。inview.js
たしかCDNも配布されていますが、3x系のjqueryで動作しないので、DLして使用するのが無難です。
領域内に表示したらクラスを付与する系のjsなどであればご都合のよいものに差し替えてOKです。
一緒にjqueryの読み込みも忘れずに。
|
1 2 3 4 5 |
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script> <script type="text/javascript" src="js/jquery.inview.min.js"></script> |
HTMLを書く
次にHTMLを書いていきましょう。今回は画像を使用する想定です。|
1 2 3 4 5 |
<div class="photoArea"> <figure> <img src="images/img01.jpg" alt=""/> </figure> </div> |
上記のような感じで記述します。
名前や括る要素はこの通りでなくてよいですが、括り①＞括り②＞画像 のようにしておくと便利です。
CSSとjsでアニメーションの設定をしていく
それでは肝となるアニメーションの設定をしていきましょう。色が敷かれて消えていくアニメーション
色が敷かれて消えていくアニメーションは画像を囲っている直前の要素（先ほど紹介した「括り②」に該当するもの）に対して設定していきます。まずは画像の括りに対してはrelativeを指定、要素が横に広がらないようにinline-blockを指定しておきます。
また、後述しますが画像を拡大してからの表示という動作もあるためサイズ指定、はみ出ないようにoverflowはhiddenにしておきます。
次に括りの::beforeで設定を行っていきます。親要素に対して色がいっぱい広がるように指定しましょう。
ただ始まりは色が敷かれていない状態にしたいので、width: 0;を指定しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.photoArea figure { position: relative; display: inline-block; overflow: hidden; width: 720px; } .photoArea figure::before { content: ''; display: inline-block; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background: #00a0e9; } |
次にアニメーションの設定をしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@keyframes barAnime{ 0% { left: 0; width: 0; } 50% { left: 0; width: 100%; } 51% { left: 0; width: 100%; } 68% { left: 0; width: 100%; } 100% { left: 100%; width: 0; } } |
左から現れて、右側に消えていくという設定になっています。
%の指定によって動きのタイミングも変わるので、お好みで調整してください。
このアニメーションは領域内に入った際に発火させるものですが、その使い方はまた後程記述します。
画像が表示されるアニメーション
色が敷かれるアニメーションの設定をしたら、次は非表示になっている画像を表示させるアニメーションの設定をしましょう。今回は画像に関しては拡大していたものが徐々に縮小されつつ、ふわっと表示されるというアニメーションを設定することにします。
とりあえずデフォルトでは透明度を0、画像サイズは1.1倍にしておきます。
|
1 2 3 4 |
.photoArea figure img { opacity: 0; transform: scale(1.1); } |
次に領域内に入った時のアニメーションです。
画像が通常サイズになりつつ表示されていく、という感じの設定をしています。
こちらも動きのタイミングはお好みで調整してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@keyframes photoAnime{ 0% { opacity: 0; transform: scale(1.1); } 50% { opacity: 0; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } |
ではアニメーションを領域内に入った際に発火させるための指定をしていきましょう。
領域内に要素が入ったときにアニメーションを発火するための設定
まずはcssではなくinview.jsに対しての設定です。inview.jsを読み込んだすぐ下などに以下のように記述をします。
今回は『.photoArea』が画面内に入ってきたら『.move』というクラスをphotoAreaに対して付与する、という設定をしました。
|
1 2 3 4 5 6 7 8 9 |
<script> $(function(){ $(".photoArea").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("move"); } }); }); </script> |
これで『move』がついたときにアニメーションをする、という指定をすることが可能になります。
ということで領域内に要素が入った時のアニメーションの設定をしていきます。
上記で設定したアニメーションを使用していきましょう。
下記のように『.photoArea.move』を使って設定していきます。
これで領域内に入ってきたときにアニメーションをしてくれます。
|
1 2 3 4 5 6 |
.photoArea.move figure::before { animation: barAnime forwards 1.5s 1 ease 0.1s normal; } .photoArea.move figure img { animation: photoAnime forwards 1.5s 1 ease 0.5s normal; } |
こちらも速度などはお好みで設定してください。
以上ですべての設定が完了しました！
実際に動いているか確かめてみましょう。
DEMO
—
理屈がわかれば結構手軽にアニメーションの実装ができます。
ぜひ試してみてください。
