PCNSPCNSについてCompany会社概要Contactお問い合わせ株式会社グローバルゲート公式ブログBlog2019-12-24anime.jsとjQueryとCSSを使ったボカロ動画みたいなアニメーションWeb制作技術こんにちは。株式会社グローバルゲートのモーリーです。紅白の出場歌手が発表されましたが、今年は米津玄師さんは出ない可能性が高そうですね。2020年に嵐に楽曲を提供するそうなので、そちらを楽しみにして、紅白はLiSAさんとおしりたんていに注目したいと思います。米津玄師さんのキャリアはボカロPからはじまっているのはご存知だと思いますが、ボカロ楽曲の動画は静止画のイラストに歌詞を組み合わせたアニメーションとして作成されていることが多いです。(最近はMMDやLive2Dを使ったハイクオリティなアニメーションも増えてきてます)Web制作では音楽をつけることはめったにありませんが、静止画+テキストでアニメーションという表現技法は管理や更新が簡単でありながらもインパクトがあっていいのではと思い、作成してみました。まとめまずは完成品をご覧ください今回はCSSとjQueryのほか、anime.jsというJavascriptライブラリを使用しました。https://globalgatej.github.io/animationLikeVocaloid/全ソースをGithubに公開していますので、ご興味のある方はご覧ください。https://github.com/globalgatej/animationLikeVocaloid会社用のGithubアカウントも開設してしまった...草まみれにするようにがんばります。HTMLHTMLはできるだけシンプルに、背景画像を設定したdivとテキストだけにします。</div>各div.keyvisual_itemが順繰りで表示され、その間にテキストが一文字ずつ表示される、という流れです。前処理としてアニメーション定義やテキストへの編集をJavascriptで行うため、アニメーション開始まで時間がかかります。ローディングを忘れずに。spanはHTML上にはいませんでしたが、以下のJavascriptで一文字ずつspanで囲う処理を入れたあとで生きてきます。JavascriptまずはHTML内でjQueryとanime.jsをロードしておきます。src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>全文はGithubをご覧いただくとして、ポイントをいくつか解説します。});テキストを一文字ずつspanで囲うことで、一文字ずつアニメーションを伴って出現する・消える、という表現が可能になります。});anime.jsにはtimelineという機能があり、timelineオブジェクトを定義し、そこにadd関数でつなげていくことで順繰りのアニメーションを作成することができます。JavascriptのPromiseと同等のものと考えると分かりやすいでしょう。jQueryでこのような順番に実行されるアニメーションを作成するときは・animate関数のコールバックでがんばる・Deferredでがんばるのどちらかになりますが、コールバックは地獄が待っていますしDeferredもコード量が増えてしまいます。anime.jsはコード管理のしやすさという点でも扱いやすいライブラリです。非公式ですが日本語翻訳されたドキュメントも分かりやすい。まとめ動画の場合は一部だけ差し替えたり文章を書き換えたりするのは難しいですが、画像と文字だけなら差し替えるのも簡単です。執筆メンバーについてモーリーWebデザイナー。当サイトのデザインと管理も担当しています。ナミーWebディレクター。お客様に寄り添った提案を心かげています。タカサーバーエンジニア。Webサイトにとってサーバーは命、ネットワークは血液です。Webサイトの安定稼働のために日夜注力しています。たっくんITアドバイザーWebサイトの活用方法からオフィスのネットワーク整備まで、多角的にITの活用方法をご案内させていただきます。ノーさん制作部ディレクター。業種を問わず多くのお客様を担当させていただきました。Webサイトのお悩み、活用方法などぜひご相談ください。カン制作部デザイナー。制作部最年少の若手ですが、だからこそ生まれるアイデア・発想にご期待ください。ご相談・お問い合わせ当社サービスについてのお問い合わせは下記までご連絡下さい。サイトからのお問い合わせはJPRSによるSSLにより保護されております。