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です。
では一つひとつ解説していきましょう。
メインビジュアル・内部のテキストがふわっと表示する
まずはメインビジュアルと内部のテキストをふわっと表示させる方法のご紹介です。
メインビジュアルをふわっと表示
HTML|
1 2 3 |
<section id="mainVisual" class="inview fadeIn"> ～ </section> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.fadeIn { opacity: 0; } .fadeIn.is-show { animation: fadeIn forwards 0.8s 1 ease 0.2s normal; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } |
HTMLに付与しているID・classを見ていきましょう。
#mainVisualについては単純にコンテンツの装飾を行ってください。
.inview については上記で説明した通り、inviewのトリガーになります。
そして今回登場した.fadeIn。
ここでふわっと表示させるfadeInアニメーションの設定を行っています。
.is-show が付与されたらキーフレームで設定したアニメーションさせる、という感じになっています。
以降でも使用するので、共通で使えるようにしておくと便利です。
領域内でテキストを下から上に表示
次にテキストが領域内で下から上に表示されるときのアニメーションについてです。HTML
|
1 2 3 4 5 6 |
<h1 class="text01 fade_main inview"> <img src="images/main_text01.svg" alt="未来を創る才能募集"/> </h1> <p class="text02 fade_main inview"> <img src="images/main_text02.svg" alt="株式会社8bit採用"/> </p> |
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 |
#mainVisual .fade_main { text-align: center; overflow: hidden; width: 100%; } #mainVisual .fade_main img{ transform: translate3d(0, 109%, 0); opacity: 0; } #mainVisual .fade_main.is-show img{ animation: fade_mainAnime forwards 0.6s 1 ease 1s normal; } @keyframes fade_mainAnime { 0% { opacity: 0; transform: translate3d(0, 109%, 0); } 30% { opacity: 0; } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } #mainVisual .text01, #mainVisual .text02 { transform: rotate(0.0001deg); } #mainVisual .text01 img { width: 60%; max-width: 724px; } #mainVisual .text02 img { width: 40%; max-width: 270px; } |
ここでは上記のようにふわっと表示されるだけでなく、他とは違う、テキストが領域内で下から上に表示されるアニメーションなので独自に.fade_main を指定しています。
今回はfade_main 内の画像に対してアニメーションを指定しています。
CSSを分解して解説していきましょう。
|
1 2 3 4 5 |
#mainVisual .fade_main { text-align: center; overflow: hidden; width: 100%; } |
まずここでoverflow: hidden;を指定しています。
これで画像の領域外は完全に隠した状態にして、一定の場所から画像が下から上に表示されるアニメーションを実現させています。
overflow: hidden;しないで完全に下から上に表示させるのもありなので、この辺りはお好みで調整してください。
|
1 2 3 4 |
#mainVisual .fade_main img{ transform: translate3d(0, 109%, 0); opacity: 0; } |
次に、ここで画像を下にずらしてかつ透明度を0にしています。
最初はこの状態にしておいて、.is-show が付与されたときに通常の表示の状態に戻すことで、下から上にふわっと表示させる想定です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#mainVisual .fade_main.is-show img{ animation: fade_mainAnime forwards 0.6s 1 ease 1s normal; } @keyframes fade_mainAnime { 0% { opacity: 0; transform: translate3d(0, 109%, 0); } 30% { opacity: 0; } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } |
というわけで、ここがアニメーション部分です。
先ほど上記で説明した通り、.fade_mainに.is-showが付与されたタイミングでアニメーションさせるという作りになっています。
fade_mainAnime というキーフレームアニメーションを作成して、それぞれタイミングなどは調整して各画像に指定しています。
|
1 2 3 4 |
#mainVisual .text01, #mainVisual .text02 { transform: rotate(0.0001deg); } |
ここはFirefoxでアニメーションの際に画像がぶれる現象が起こるのでそれを回避するために記述しています。
特に起きない場合は取ってください。
|
1 2 3 4 5 6 7 8 |
#mainVisual .text01 img { width: 60%; max-width: 724px; } #mainVisual .text02 img { width: 40%; max-width: 270px; } |
この部分は画像のサイズ指定です。必要に応じて調整等行ってください。
これで『メインビジュアル・内部のテキストがふわっと表示する』の完成です。
テキストが下から上にフェードイン
次はテキストが下から上にフェードインするアニメーションについて、解説します。
HTML
|
1 2 |
<h2 class="msgTitle inview fadeInUp anmdly_2s">便利でおもしろいを形にする<br>東京都目黒区のWeb制作会社</h2> <p class="leading font_g inview fadeInUp anmdly_2s">株式会社8bitは持っている技術を歯車のように組み合わせて、「便利でおもしろいシクミ」を作り出す、<br>作ることに特化したWeb制作会社です。<br>私たちは、ウェブ制作の分野でリーダーシップを発揮し、常に進化し続ける会社でありたいと考えています。そのためには、優秀な人材を集めることが欠かせません。<br>私たちの採用にご興味をお持ちいただける方々と出会えることを楽しみにしています。</p> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.fadeInUp { opacity: 0; transform: translate(0, 10%); } .fadeInUp.is-show { animation: fadeInUp forwards 0.8s 1 ease 0.2s normal; } @keyframes fadeInUp { 0% { opacity: 0; transform: translate(0, 10%); } 100% { opacity: 1; transform: translate(0, 0); } } .anmdly_2s { animation-delay: 2s !important; } |
先ほどのメインビジュアル部分で解説したのとほぼ同様になりますが、今度は.fadeInUp のように下から上にフェードインして表示されるようなアニメーションを指定します。
ちなみに.anmdly_2s の部分についてはアニメーションをここだけ遅延させたかったので後から追加して調整しています。
これで『テキストが下から上にフェードイン』の完成です。
色が敷かれてから画像を表示
色が敷かれてから画像を表示させるアニメーションです。HTML
|
1 |
<div class="photoArea inview"></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 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 65 66 67 68 69 70 71 72 73 74 |
#message .photoArea { position: absolute; top: 130px; right: 0; width: 40%; height: 420px; overflow: hidden; } #message .photoArea::before { content: ''; display: inline-block; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; background: #11a99a; } #message .photoArea.is-show::before { animation: barAnime forwards 1.5s 1 ease 0.1s normal; } #message .photoArea::after { content: ''; width: 100%; height: 110%; position: absolute; background: url("images/msg_img.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 1; opacity: 0; transform: scale(1.1); } #message .photoArea.is-show::after { 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); } } |
.photoAreaで画像のエリアを置いているだけで、基本的にbeforeやafterを駆使しています。
それではCSSを分解して解説していきます。
|
1 2 3 4 5 6 7 8 |
#message .photoArea { position: absolute; top: 130px; right: 0; width: 40%; height: 420px; 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 |
#message .photoArea::before { content: ''; display: inline-block; width: 0; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; background: #11a99a; } #message .photoArea.is-show::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 21 22 23 24 25 26 27 28 29 30 |
#message .photoArea::after { content: ''; width: 100%; height: 110%; position: absolute; background: url("images/msg_img.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 1; opacity: 0; transform: scale(1.1); } #message .photoArea.is-show::after { 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); } } |
次に写真のアニメーションです。
ここでafterでデフォルトでtransform: scale(1.1);と指定しておきます。
画像のエリアを拡大しておいて、photoAnime のキーフレームアニメーションで徐々に戻していきます。
似たようなことをこちらの記事に書いてあるので参考にどうぞ。
これで『色を敷いてからのアニメーション』の完成です。
スライド
このスライドはsplideというライブラリを使用しています。splide
軽量でオプションも豊富なのでおすすめのライブラリです。
とりあえず今回使用したものを載せます。
CSS
|
1 |
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@splidejs/splide@4.0.7/dist/css/splide.min.css"> |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="splide inview fadeInUp"> <div class="splide__arrows"> <button class="arrowGrn splide__arrow--prev"></button> <button class="arrowGrn splide__arrow--next"></button> </div> <div class="splide__track"> <ul class="worksSlide splide__list"> <li class="splide__slide"> <picture class="icon"> <source srcset="images/icon_top-sec1_sp.png" media="(max-width: 480px)" /> <img src="images/icon_top-sec1.png" alt="コーポレートサイト制作"/> </picture> <div class="textarea"> <h4>コーポレートサイト制作</h4> <p class="caption font_g">UI設計に重点を置き、CMSの導入まで営業ツールとしてのWebサイトを提案いたします</p> </div> <a href="https://8bit.co.jp/service/corporate-site/" target="_blank" rel="noopener"><span>VIEW MORE</span></a> </li> ～中略～ </ul> </div> </div> |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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> const options = { type : 'loop', focus : 'center', autoWidth: true, gap: 30, autoScroll: { speed: 0.8, pauseOnHover: false, pauseOnFocus: true, }, breakpoints: { 480: { gap: 24, fixedWidth: "36rem", }, }, }; const splide = new Splide(".splide", options); splide.mount(window.splide.Extensions); </script> |
CSSはhead部分に設置してください。今回はcdnで読み込ませています。
スライドの細かいデザイン部分については今回はここに乗せるのは割愛します。
HTML部分についての解説です。
まずは.splideで全体を囲みます。
.splide__arrows部分についてはスライドの矢印部分です。必要に応じてつけてください。
.splide__trackでulの直前を囲みます。
次に.splide__listをulに指定します。
最後に各li要素に.splide__slideをつけていきます。
少し囲みなどが多い気もしますが、最初に型を作ってしまえばそれに当てはめていくだけです。
JSについてはbodyの閉じタグの直前に置いています。
こちらもcdnのものを読んでいます。
そのあとオプションを指定していきます。
ざっくりした説明をすると、今回は自動ループするスライドを作成、PCとスマホ用でレイアウトを少し切り分ける指定をしています。
詳しくは、サイトのサンプルをご確認ください。
splide
これで『スライド』の完成です。
hoverしたら背景画像を拡大
hoverしたら背景の画像が拡大される方法です。HTML
|
1 2 3 4 5 6 7 |
<ul class="aboutList"> <li class="inview fadeInUp"> <a target="_blank" rel="noopener" class="modalbtn"> <h4>Webエンジニア</h4> <p class="moreBtn"><span>VIEW MORE</span></p> </a> </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 |
#about .aboutList li { background: #000000; overflow: hidden; position: relative; } #about .aboutList li::after { content: ''; display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; left: 0; right: 0; top: 0; z-index: 0; transition: transform .4s cubic-bezier(0.1, 0, 0.2, 1) 0s; } #about .aboutList li:first-of-type::after { background-image: url("images/about_bg01.jpg"); } #about .aboutList li:hover::after { transform: scale(1.15); opacity: 0.8; } |
.aboutList liについては背景の画像の動作のためにoverflow: hidden;とposition: relative;を指定しておきます。
次に、afterに対して背景画像の指定をしておきます。
transitionの速度などはお好みで変更してください。
あとはliをhoverしたときにafterを拡大、必要に応じて透過させてli自体に敷いている背景色を見せます。
これで『hoverしたら背景画像を拡大』の完成です。
テキストを横から1文字ずつ表示
次にテキストを横から1文字ずつ表示する方法です。HTML
|
1 2 3 4 5 6 7 |
<div class="bg__texts"> <span class="inview">E</span> <span class="inview">N</span> <span class="inview">T</span> <span class="inview">R</span> <span class="inview">Y</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 29 30 31 32 33 34 |
#entry .bg__texts { position: absolute; z-index: 0; line-height: 1; opacity: 0.2; pointer-events: none; } #entry .bg__texts span { display: inline-block; color: #efefef; font-size: clamp(1.25rem, 16vw, 13.75rem); transition: all 0.2s ease; opacity: 0; transform: translate(80px, 0); } #entry .bg__texts span.is-show { opacity: 1; transform: translate(0, 0); } #entry .bg__texts span:first-of-type { transition-duration: 0.5s; } #entry .bg__texts span:nth-of-type(2) { transition-duration: 1s; } #entry .bg__texts span:nth-of-type(3) { transition-duration: 1.5s; } #entry .bg__texts span:nth-of-type(4) { transition-duration: 2s; } #entry .bg__texts span:nth-of-type(5) { transition-duration: 2.3s; } |
HTMLではspan1つ1つに対して.inviewを指定しています。
CSSではspanにテキストのアニメーション速度、透明度、横にどれぐらいずらすかを指定しています。
そのあとまとめて.is-show がついた際の透明度・ずらした分を元に戻す指定を行います。
あとは1つ1つ、アニメーション開始のタイミングを調整します。
これで『テキストを横から1文字ずつ表示するアニメーション』の完成です。
hoverしたら背景色を横から敷く
最後に、hoverしたら背景色を横から敷くアニメーションです。HTML
|
1 2 3 |
<p class="entryBtn btmview fadeInUp"> <a target="_blank" rel="noopener" class="modalbtn"><span>エントリーページへ</span></a> </p> |
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 |
#entry .entryBtn a { background: #045057; padding: 0 20px; color: #FFFFFF; text-align: center; font-size: 1.25rem; text-decoration: none; position: relative; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } #entry .entryBtn a span { position: relative; z-index: 2; } #entry .entryBtn a::after { content: ''; border: rgba(255, 255, 255, 0.5) solid 1px; width: 98%; height: 92%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 1; transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s; } #entry .entryBtn a::before { content: ''; position: absolute; top: 0; left: 0; z-index: 1; background: #000000; ; width: 100%; height: 100%; transition: transform .5s cubic-bezier(0.8, 0, 0.2, 1) 0s; transform: scale(0, 1); transform-origin: right top; } #entry .entryBtn a:hover::before { transform-origin: left top; transform: scale(1, 1); } |
とりあえず.entryBtn aに対して、ボタンの基本スタイルを指定しています。
そして.entryBtn a spanでテキストを囲って、z-index: 2;を指定しています。
これは横から色が敷かれる際にテキストが下に潜り込んでしまうため、それを回避するためにつけています。
.entryBtn a::after については、今回内側にボーダーをつけたため指定しています。
ここもz-indexの指定を忘れずに。必要なければとってしまってもよいです。
そして.entryBtn a::before で背景色を指定します。
transformのscaleで横のサイズを0にしておきます。
そのあとは.entryBtn a:hover::before でhoverされた際の指定をします。
要素の座標を指定して、横幅を元の大きさに戻す指定をしています。
座標を変えればいろいろな方向から色を敷くことができます。
これで『hoverしたら背景色を横から敷く』の完成です。
—
なんとなくとっかかりずらい部分もあるかもしれませんが、試してみると案外すんなりできます。
ぜひいろいろ試してみてください！
サンプルサイト
弊社のLP制作について
