WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。
今回は弊社で作成した『受験生向け女子大学のオープンキャンパス特設サイト』のサンプルを使用しながら解説していきます。
初歩的なアニメーションの知識はある、という方向けの記事です。
参考にするサンプルサイトはこちらから
サンプルサイト
目次
inview.jsを読み込ませる
今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。これを使うとスクロールをして表示領域に入った時にイベントを発生させることができます。
|
1 2 3 4 5 |
<script src="//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> |
一緒にjqueryの読み込みもさせてください。
CDNも配布されていますが、3x系のjqueryで動作しないので、使用しているものによってはDLして使用するのが無難です。
あとは読み込ませたすぐ下にこのように記述しておきます。
記述の内容としては、まず『inview』というclassをトリガーにします。
このトリガーが視界に入ったら『is-show』というclassを付与します。これが付与されることでアニメーションイベントを発生させることができます。
|
1 2 3 4 5 6 7 |
$(function () { $(".inview").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } }); }); |
おそらく表示するタイミングを調整したいことも多いと思うので、領域内に表示したらクラスを付与する系のjsなどであればinview.jsでなくてもご都合のよいものに差し替えてOKです。
では一つひとつ解説していきましょう。
スライドアニメーション
アニメーションしながら、自動で切り替わるスライドです。徐々に画像を拡大させつつ、数秒の間隔で次の画像に切り替えています。
JSのライブラリとCSSを兼ね合わせているので、それぞれ解説していきます。
スライド本体
まず、単純にスライドを動作させるのにはsplideというライブラリを使用しています。splide
軽量でオプションも豊富なのでおすすめのライブラリです。
とりあえず今回使用したものを載せます。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<div class="splide"> <h1 class="mvText"><img src="images/mv_text.svg" alt="OPEN CAMPUS 2023"/></h1> <div class="splide__track"> <ul class="worksSlide splide__list"> <li class="splide__slide"> <img src="images/slide01.jpg" alt=""/> </li> <li class="splide__slide"> <img src="images/slide02.jpg" alt=""/> </li> <li class="splide__slide"> <img src="images/slide03.jpg" alt=""/> </li> </ul> </div> </div> |
CSS
|
1 |
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide.min.css"> |
JS
|
1 2 3 4 5 6 7 8 9 10 11 |
<script src="//cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/js/splide.min.js"></script> <script src="//cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script> <script> var splide = new Splide( '.splide', { type : 'loop', autoplay: true, pauseOnHover: boolean = false, interval: number = 6000, } ); splide.mount(); </script> |
CSSはhead部分に設置してください。今回はcdnで読み込ませています。
スライドの細かいデザイン部分についてはきりがないので今回はここに乗せるのは割愛します。
HTML部分についての解説です。
まずは.splideで全体を囲みます。
.splide__arrows部分についてはスライドの矢印部分です。必要に応じてつけてください。
.splide__trackでulの直前を囲みます。
次に.splide__listをulに指定します。
最後に各li要素に.splide__slideをつけていきます。
少し囲みなどが多い気もしますが、最初に型を作ってしまえばそれに当てはめていくだけです。
JSについてはbodyの閉じタグの直前に置いています。
こちらもcdnのものを読んでいます。
そのあとオプションを指定していきます。
オプションも解説するとここでは長くなってしまうのでざっくり説明すると、6秒で自動で切り替わるスライドを生成する、といった感じになっています。
これでスライド本体の設定は完了です。
今度はCSSでアニメーションを設定していきます
切り替わりの時に白い帯を表示させる
最初は切り替わりの時に白い帯を重ねる方法についてご紹介します。HTML
|
1 2 3 |
<li class="splide__slide"> <img src="images/slide01.jpg" alt=""/> </li> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#mainVisual .splide .splide__slide::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #ffffff; z-index: 2; } #mainVisual .splide .splide__slide.is-active::before { animation: splideAnime forwards 0.5s 1 cubic-bezier(.5, 0, .2, 1) 0.1s normal; } @keyframes splideAnime { 0% { width: 100%; } 100% { width: 0; } } |
まず.splide__slideのbeforeに対して横幅100%の白い帯をデフォルトで表示させておきます。
そしてsplideでは、スライドが切り替わった時に.is-active というclassが付きます。
そのタイミングで、その白い帯を徐々に横幅0%にしていく、というキーフレームアニメーションを設定します。
速度などはお好みでよいですが、先ほど設定したsplideの切り替え秒数に合わせてうまく調整してください。
これで白い帯を表示させるアニメーションは完了です。
スライド画像を徐々に拡大させる
次は時間経過で徐々に画像を拡大させる方法です。HTML
|
1 2 3 |
<li class="splide__slide"> <img src="images/slide01.jpg" alt=""/> </li> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#mainVisual .splide .splide__slide { width: 100%; aspect-ratio: 1 / 0.4; background: #ffffff; } #mainVisual .splide .splide__slide img { object-fit: cover; } #mainVisual .splide .splide__slide.is-active img { animation: splideImg forwards 6.5s 1 ease-in 0s normal; transform: scale(1); } @keyframes splideImg { 0% { transform: scale(1); } 100% { transform: scale(1.15); } } |
スライドは.splide__slideに対して、aspect-ratioを使用してサイズを設定しています。
画像にはobject-fit: cover;を指定しています。これで先ほどの.splide__slideのボックス全体を埋める形になります。
そこから.is-activeになったよスライドに対して、画像のアニメーションを指定します。
こちらも速度などはお好みでよいですが、先ほど設定したsplideの切り替え秒数に合わせてうまく調整してください。
これでスライド画像を徐々に拡大させるアニメーションは完了です。
ページネーションを時間経過とともに変化させるアニメーション
スライド周りではこれで最後、ページネーションを時間経過とともにアニメーションさせる方法です。徐々にタイマーのように、バーに色が付いていきます。
これはsplideにデフォルトで付いているページネーションをカスタマイズしていきます。
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 |
#mainVisual .splide__pagination { bottom: -20px; right: 0; left: auto; padding: 0; } #mainVisual .splide__pagination .splide__pagination__page { display: inline-flex; width: 50px; height: 5px; border-radius: 0; background: #ffffff; } #mainVisual .splide__pagination .splide__pagination__page.is-active { transform: scale(1); background: #ffffff; position: relative; } #mainVisual .splide__pagination .splide__pagination__page.is-active::before { content: ''; display: inline-block; position: absolute; width: 0; height: 100%; background: #7097e7; animation: paginationAnime forwards 6s 1 linear 0s normal; } @keyframes paginationAnime { 0% { width: 0%; } 100% { width: 100%; } } |
とりあえず、生成されるページネーションを好みの形に調整します。
デフォルトのものから変更するために少し色々なclassが付いています。
そして.is-activeになった時に徐々に表示される色の部分はbefore で実現させます。
.splide__pagination__pageに対して、上から色を被せて、最初は横幅を0にしておきます。
.is-activeになったら、広がっていくようなアニメーションをさせます。
splideの切り替え秒数は6秒で設定しているので、今回はCSSでも6sで設定しています。
これでページネーションを時間経過とともに変化させるアニメーションの完了です。
以上で『スライドアニメーション』の完成です。
メインビジュアルの帯のアニメーション
メインビジュアルの後ろに敷いている帯のアニメーションについてご紹介します。ここでは横からスライドして帯を表示、グラデーションの色を動かすという2つのアニメーションをさせています。
帯のベースは以下です。
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 |
#mainVisual::after { content: ''; display: block; position: absolute; bottom: -120px; left: 0; right: 0; width: 0; height: 295px; background: linear-gradient(90deg, #8abdec 0%, #8ad8ec 60%, #f5e1f3 90%, #8abdec 100%); background-size: 200% 200%; animation: bggradient 25s ease infinite; z-index: -1; } @keyframes mainvBar { 0% { width: 0; } 100% { width: 100%; } } @keyframes bggradient{ 0% { background-position: 0% 50%; } 50% { background-position: 150% 50%; } 100% { background-position: 0% 50%; } } |
CSSでメインビジュアルの囲いである#mainVisual に対して、after で指定をしています。
そしてここから、上記のinviewで.is-show のclassが付与されたときにアニメーションを開始させる指定をします。
CSS
|
1 2 3 |
#mainVisual.is-show::after { animation: mainvBar forwards 0.6s 1 cubic-bezier(0.8, 0, 0.6, 1) 0.4s normal, bggradient 25s ease infinite; } |
2つのアニメーションを一緒に指定しています。
まずはmainvBarというキーフレームアニメーションを用意して、.is-showが付与されたときに横幅が100%になるように設定します。
これで横からスライドして帯を表示するアニメーションができました。
次はグラデーションのアニメーションです。
グラデーションをbackground-sizeで大きめに設定をして、それをbggradientｍのキーフレームアニメーション内でbackground-positionを使用してアニメーションさせています。
これで横からグラデーションを動かすアニメーションができました。
グラデーションのアニメーションに好いて詳しくはこちらの記事でも紹介しています。
これで『メインビジュアルの帯のアニメーション』の完成です。
各要素を下から上にフェードインさせる
次に各要素を下から上にフェードインさせる方法についてです。ここではinviewを主に使います。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="facylltyList"> <li class="inview fadeInUp"> <a class="modalbtn"> <div class="photo"> <img src="images/fc_photo01.jpg" alt="文学部"/> </div> <div class="text"> <p>文学部</p> </div> </a> </li> <li class="inview fadeInUp"> <a class="modalbtn"> <div class="photo"> <img src="images/fc_photo02.jpg" alt="医学部"/> </div> <div class="text"> <p>医学部</p> </div> </a> </li> ～中略～ </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 |
#facyllty .facylltyList li{ transition: all 0.3s ease; } .fadeInUp { opacity: 0; transform: translate(0, 10%); } .fadeInUp.is-show { animation: fadeInUp forwards 0.8s 1 ease 0.2s normal; } |
inviewと、下から上に表示させるためのfadeInUpというclassをつけておいて、.is-show が付与されたらアニメーションさせる、という感じになっています。
これだけで完了です。
今回は元からliの上部をずらしたデザインなので、次々と表示されるようなアニメーションになっていますが、頭がそろった要素を次々と表示させたい場合にはtransition-delayをうまく使用しましょう。
これで『各要素を下から上にフェードインさせる』の完成です。
色が敷かれてから画像を表示
色が敷かれてから画像を表示させるアニメーションです。HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul class="programList"> <li class="inview fadeInUp"> <div class="photo"> <figure> <img src="images/pro_photo01.jpg" alt="キャンパスツアー"/> <figcaption>キャンパスツアー</figcaption> </figure> </div> <div class="text"> <p>学生スタッフによるキャンパスツアーです。実際使用している教室などを見ることができます。ぜひ気軽に学生スタッフに質問しながら、ツアーを楽しんでください！</p> </div> </li> ～中略～ </ul> |
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 |
#program .programList li .photo figure { position: relative; overflow: hidden; } #program .programList li .photo figure::before { content: ''; display: inline-block; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background: #62cce7; } #program .programList li.is-show .photo figure::before { animation: barAnime forwards 1.5s 1 ease 0.1s normal; } #program .programList li .photo figure img { opacity: 0; transform: scale(1.1); } #program .programList li.is-show .photo 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); } } |
それではCSSを分解して解説していきます。
|
1 2 3 4 |
#program .programList li .photo figure { position: relative; overflow: hidden; } |
まずは写真のエリアについて、はみ出た部分に関しては overflow: hiddenで隠すようにしています。
|
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 |
#program .programList li .photo figure::before { content: ''; display: inline-block; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background: #62cce7; } #program .programList li.is-show .photo figure::before { animation: barAnime forwards 1.5s 1 ease 0.1s 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; } } |
次に色を敷くアニメーションです。色を乗せつつ、最初はwidthを0に指定。
そのあとトリガーが付与されたらwidthを100%にするアニメーションを設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#program .programList li .photo figure img { opacity: 0; transform: scale(1.1); } #program .programList li.is-show .photo figure img { animation: photoAnime forwards 1.5s 1 ease 0.5s normal; } @keyframes photoAnime{ 0% { opacity: 0; transform: scale(1.1); } 50% { opacity: 0; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } |
次に写真のアニメーションです。
ここで画像に対して、デフォルトでtransform: scale(1.1);と指定しておきます。
画像を拡大しておいて、photoAnime のキーフレームアニメーションで徐々に戻していきます。
実は似たようなものはこちらの記事に書いてあるので参考にどうぞ。
これで『色を敷いてからのアニメーション』の完成です。
テキストを横から1文字ずつ表示
次にテキストを横から1文字ずつ表示する方法です。HTML
|
1 2 3 4 5 |
<div class="bgText"> <span class="inview">Q</span> <span class="inview">&</span> <span class="inview">A</span> </div> |
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 |
.bgText { font-family: 'Oswald', sans-serif; font-weight: 600; line-height: 1; position: absolute; user-select: none; } .bgText span { display: inline-block; color: #8ad8ec; font-size: 12.5rem; transition: all 0.2s ease; opacity: 0; transform: translate(80px, 0); } .bgText span.is-show { opacity: 1; transform: translate(0, 0); } .bgText span:first-of-type { transition-duration: 0.5s; } .bgText span:nth-of-type(2) { transition-duration: 1s; } .bgText span:nth-of-type(3) { transition-duration: 1.5s; } |
HTMLではspan1つ1つに対して.inviewを指定しています。
CSSではspanにテキストのアニメーション速度、透明度、横にどれぐらいずらすかを指定しています。
そのあとまとめて.is-show がついた際の透明度・ずらした分を元に戻す指定を行います。
あとは1つ1つ、アニメーション開始のタイミングを調整します。
これで『テキストを横から1文字ずつ表示するアニメーション』の完成です。
マウスホバーでボタンのグラデーションを動かす
マウスホバーしたときに、背景のグラデーションを動かす方法についてです。HTML
|
1 2 3 |
<div class="btnArea"> <a class="modalbtn"><span>オープンキャンパス事前予約</span></a> </div> |
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 |
.btnArea a{ display: flex; flex-wrap: wrap; align-content: center; justify-content: center; max-width: 450px; width: 96%; height: 90px; color: var(--color-white); font-weight: 700; font-size: 1.25rem; background: linear-gradient(270deg, #7097e7 0%, #70cce7 25%, #70cce7 51%, #7097e7 100%); background-position: 1% 50%; background-size: 200% auto; text-decoration: none; line-height: 1.3; margin: 0 auto; transition: all 0.3s ease; position: relative; box-shadow: 0px 2px 20px 0px rgba(2, 40, 49, 0.2); } .btnArea a::after{ content: ''; display: inline-block; width: 15px; height: 15px; background: url("images/arrow_w.svg") no-repeat center center / 15px 5px; margin-left: 5px; transition: all 0.3s ease; position: absolute; right: 20px; top: 0; bottom: 0; margin: auto 0; } .btnArea a:hover{ background-position: 99% 50%; transform: scale(0.97); } |
アニメーションの仕組みですが、背景のグラデーションのbackground-sizeを最初大きめに取っておいて、background-positionをずらして再現しています。
図解すると以下のような感じです。
scaleなどはお好みで調整してください。
また、こちらでも解説をしているのでそちらもチェックしてみてください。
これで『マウスホバーでボタンのグラデーションを動かす』の完成です。
アコーディオン
最後に、アコーディオンの要素です。こちらはJSを使用します。
JS
|
1 2 3 4 5 6 |
$(function(){ $('.q-open').click(function(){ $(this).parent('li').toggleClass('active'); $(this).next('.ans').slideToggle(); }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="qaList"> <li class="inview fadeInUp"> <h3 class="q-open"><span>当日の流れを教えてください</span></h3> <p class="ans">大まかな流れとしては、<br> ①指定時刻に到着次第受付へ→②すべての学部合同で説明会→③その後学部ごとにツアーなどの開始<br> となります。日程ごとに細かい流れは異なりますので、あらかじめ予約サイトの方をご確認ください。<br> また、当日にも学生スタッフや教員にお気軽にご相談ください。</p> </li> ～中略～ </ul> |
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 64 |
#qa .qaList li { background: var(--color-white); box-shadow: 0px 0px 20px 0px rgba(2, 16, 48, 0.05); border-radius: 8px; margin-bottom: 20px; position: relative; } #qa .qaList li h3 { padding: 20px 50px 20px 30px; color: var(--color-navy); font-size: 1.15rem; font-weight: 700; transition: all 0.3s ease; position: relative; } #qa .qaList li h3:hover { cursor: pointer; opacity: 0.7; } #qa .qaList li h3::before, #qa .qaList li h3::after { content: ''; display: inline-block; width: 20px; height: 2px; background-color: var(--color-lightBlue); position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: opacity 0.5s; } #qa .qaList li h3::after { transform: translateY(-50%) rotate(90deg); transition: transform 0.5s; } #qa .qaList li.active h3::before { opacity: 0; } #qa .qaList li.active h3::after { transform: translateY(-50%) rotate(180deg); } #qa .qaList li h3 span{ display: inline-block; position: relative; padding-left: 55px; } #qa .qaList li h3 span::before{ content: 'Q'; display: flex; justify-content: center; width: 35px; height: 35px; background: linear-gradient(270deg, #7097e7 0%, #70cce7 100%); color: var(--color-white); line-height: 33px; position: absolute; left: 0; top: -5px; } #qa .qaList li .ans{ line-height: 2.2; display: none; } |
JSで.q-open というclassが付与されれいる要素をクリックすると、そのすぐ隣にある.ans が開くようになっています。
また、.q-openの親要素のliに対して.active が付くようにしています。
こうすることで、#qa .qaList li h3に対してbeforeとafterで作成しているプラスのアイコンが、クリックされ、.active が付くことでマイナスに変化するように指定しています。
これで『アコーディオン』の完成です。
—
ぜひ参考にしていろいろ試してみてください！
サンプルサイト
弊社のLP制作について
