技術 - アニメーションの記事一覧
barchartrace - アニメーションする横棒グラフ
世の中にはたくさんのチャートが存在します。ただ数字を並べるだけでは分かりづらく、可視化することでトレンドが見えたり、全体の雰囲気を学べるようになります。さらに一回表示するだけでなく、変化をアニメーション化することで、よりダイナミックな変化を掴めるチャートになります。今回紹介するbarchartraceは横棒グラフでアニ...
ゆるGIFメーカー - 画像を振るわせてアニメーションGIFを生成
アニメーションGIFは動いていなければ意味がありません。しかし、アニメーションを一から作るのは大変です。動画などの素材をベースにするのはそのためです。コマ撮りで作るのは時間も労力もかかります。そこで一枚の画像からでもアニメーションGIFが作れるゆるGIFメーカーを使ってみましょう。フルフルと震える、新しいかわいらしさを...
Excalidraw Claymate - Excalidrawを使ったアニメーション作成ソフトウェア
教科書や書籍の端っこでパラパラ漫画を書いた経験は多くの人があるはずです。その際には前の絵とちょっとだけずらして書いていくのがポイントになります。ちょっとずつずらして書くのを繰り返すことで、一気にページをめくると動いて見えるようになります。そんなパラパラ漫画風のアニメーションGIFを作れるのがExcalidraw Cla...
midori - 背景画像を格好よくアニメーション
画像をただ表示して終わりでは印象に残りづらいです。しかし、JavaScriptやCSSでちょっとアニメーションさせるだけでもインパクトが大きく違います。さらにエフェクトまで行われれば、さらに印象深くなります。今回紹介するmidoriはまさにそのためのライブラリになります。画像の切り替え時にアニメーションやエフェクトを行...
Scrawl-canvas - Canvasを使ったアニメーションライブラリ
HTMLではDOMを使ってデザインを構築するだけでなく、Canvasで自由度高くコンテンツをレンダリングできます（他にWebGLもありますが）。Canvasは扱いが難しいですが、アニメーションなども実現でき、可用性の高い技術です。そんなCanvasを使って面白いアニメーションを実演してくれるのがScrawl-canva...
Smooth Scrolling Image Effects - スクロールを使って画像にアニメーションを起こす
Webブラウザでは様々なユーザアクションを使ってイベントを実行できます。クリックや文字入力はもちろん、ウィンドウのリサイズやマウスオーバーなど細かく指定して、よりユーザビリティの高い仕組みを提供できます。Smooth Scrolling Image Effectsは名前の通り、スクロールを使って画像エフェクトを実行しま...
wow.js - スクロールで開始するCSSアニメーションライブラリ
Web上でアニメーションを実現させるのはとても大変です。それだけに閲覧者にとっては大きなインパクトがあります。少しでも楽に実現させるために、ライブラリを使うのがいいでしょう。様々なライブラリを知っておけば、ぴったりの場面がありそうです。今回紹介するwow.jsはスクロールによって出現するアニメーションライブラリになりま...
SVG ANIMATIONS - JavaScriptも画像も用いないアニメーション集
Web上でアニメーションを実現する方法は幾つかあります。アニメーションGIFを使う方法、CSSアニメーション、そしてSVGやJavaScriptを使うこともできるでしょう。ユーザ操作によるインタラクティブなアニメーションを実現しようとすると、JavaScriptが選択肢になります。しかしWebブラウザ側でJavaScr...
Locomotive Scroll - マルチプラットフォームで動作するパララックス・エフェクトライブラリ
パララックス・エフェクトを使うと、インパクトのある表現が実現します。Webページは縦長のサイトが多いので、スクロールで見た目のインパクトが与えられればユーザの目を引きつけられるでしょう。今回紹介するLocomotive Scrollはパララックス・エフェクトとDOMの表示されるタイミングを合わせたスクロールライブラリで...
MMDLoader-app - THREE.MMDLoaderを使ったMMDサンプル集
3Dモデルによるアニメーション、ダンスなどを行うフォーマットとして有名なのがMMD（MikuMikuDance）です。同名ソフトウェアで作ったデータを読み込めばWeb上でのMMDを動かせます。そのためのライブラリがMMDLoaderです。今回紹介するMMDLoader-appは、そんなMMDLoaderを利用するThr...
CSSLive2d - Live2dをCSSだけで動かすチャレンジ
2Dのイラストをまるでアニメーションのように動かしてくれるのがLive2Dです。ノベルゲームなどで使うと、より臨場感が生まれることでしょう。最近ではVTuberなどでも活用されているようです。公式で提供されているリソースを使い、何とかCSSとJavaScriptでLive2Dのデータを動かしたのがCSSLive2dにな...
Pencil2D Animation - マルチプラットフォームで動作するアニメーション作成ソフトウェア
アニメは日本が世界に誇るコンテンツとなっています。毎週多くのアニメが放映されており、NetflixやHuluなどで全世界に配信されています。その待遇については様々な課題もあるようですが、アニメーターになりたい人たちは後を絶ちません。もし自分で今からアニメを作ってみたいならばPencil2D Animationを使ってみ...
Izmir - 画像にマウスカーソルを当てると情報を表示
リンクがある画像の上にマウスを載せた時に情報を追加表示できると、ユーザに見てもらえる可能性が高くなります。その際にちょっとしたアニメーションができれば、より見た目のインパクトが大きくなることでしょう。今回紹介するIzmirはそのためのライブラリです。ユーザのブラウジングがより楽しいものになるでしょう。## Izmirの...
Distortion Hover Effect - マウスオーバーで画像を切り替え
Webページではユーザのアクションによって様々なエフェクトが可能です。ユーザ自身が分かるアクションとしては文字入力やクリックなどになりますが、他にもウィンドウサイズを変えたり、スクロールでも可能です。その中で最も簡単そうな、マウスオーバー時にエフェクトを起こすのがDistortion Hover Effectです。しか...
Scene.js - JavaScriptでタイムラインベースのアニメーション
アニメーションの基本はタイムラインベースでしょう。様々なオブジェクトをいつのタイミングで動かすのか、どこに動かすのかをタイムラインに沿って決めます。その結果、複雑なアニメーションが実現できます。今回紹介するScene.jsはWeb上でのアニメーションを実現するライブラリです。## Scene.jsの使い方JavaScr...
CanvasKit - WebAssemblyを使ってアニメーション
WebAssemblyはWeb上で高速実行されるバイナリフォーマットです。しかし問題として、DOMは扱えません。もしDOMを使う場合にはWebブラウザ側にメッセージを流してJavaScriptで更新するか、Canvasのメモリを直接書き換える方法になります。今回紹介するCanvasKitはアニメーションライブラリである...
Zdog - SVGやCanvasにドロー
Illustratorなどで描いたキャラクターも、そのままでは単なる絵と変わりません。SVGであれば、JavaScriptを使ってインタラクティブな操作が実現します。そうすれば、画像とは違った楽しみ方が生まれるでしょう。今回紹介するZdogはJavaScriptでイラストを描き、3Dのように回転もできるライブラリです。...
Transmission - 車のギア変更をビジュアル化
ビジュアル化は理解を助けてくれます。文字だけでは実物が思い浮かばなかったり、具体的な場所が分からないことも、一つの画像や動画があるだけで理解度が全く変わってきます。作成するのはテキストよりも大変ですが、その効果は大きいと言えるでしょう。今回紹介するTransmissionは車のギア変更をビジュアル化してくれるという面白...
IsometricSass - CSSだけで実現する3Dライブラリ
Web上で3Dを描くのは大変です。多くの場合、CanvasであったりWebGLを使いますが、そのためのライブラリを利用しなければなりません。覚えることもたくさんあり、ちょっとした表示を行うのには不便です。そこで使ってみたいのがIsometricSassです。Sassライブラリとなっており、CSSだけで3D表現を実現でき...
CSS3 Animate It - クラス名を指定するだけで簡単にアニメーションを実現
CSS3によってアニメーションが実現できるようになったとは言っても、それはイコール簡単であるという意味ではありません。ごく基礎的な実装が用意されているので、現実的なアニメーションは自分で作らないといけません。そこで使ってみたいのがCSS3 Animate Itです。CSSのクラスを指定するだけでアニメーションを実現して...