技術 - アニメーションの記事一覧
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のクラスを指定するだけでアニメーションを実現して...
Animating URLs with Javascript and Emojis - URLで絵文字を使ったアニメーション
絵文字は世界から認知されるコンテンツになっています。年々文字数も増えており、表現できる情報がどんどん増えています。テキストとしてだけでなくスライドで使ったり、アイコン代わりにしているケースもあります。今回紹介するAnimating URLs with Javascript and Emojisはその名前の通り、アニメー...
anime.js - 軽量、多機能なアニメーションライブラリ
Webの表現力が向上しているのを実感できるものの一つにアニメーションが挙げられます。これまではFlashであったりJavaScriptで無理矢理DOMを動かしていましたが、CSS3やSVGによってスムーズなアニメーションが実現できています。とは言え、アニメーションを作るのは大変です。今回は軽量なアニメーションライブラリ...
GIF Brewery - 動画やデスクトップ操作を記録してアニメーションGIFを作成
アニメーションGIFの需要が高まっています。動画だと面白くない部分まで再生されますが、アニメーションGIFは短く、ハイライト部分だけを繰り返し再生します。無音なのも想像力がかき立てられるので面白いです。そんなアニメーションGIFを作る方法はいくつかありますが、今回は様々な機能を備えたGIF Breweryを紹介します。...