技術 - アニメーションの記事一覧
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を紹介します。...
txqr - QRコードをアニメーションさせてデータ転送
QRコードは世界中で使われています。その扱える情報量は英数字であれば4,296文字までですが、誤り訂正のレベルを上げればもっと減少します。QRコードのサイズも大きくなってしまうデメリットもあります。そこで生み出されたのがtxqrです。QRコードをアニメーションさせることで情報伝達量を増やそうという試みです。## txq...
wiv.js - DIVタグをグニャグニャに
Webサイトではあまりアニメーションが使われることが多くありません。CSSアニメーションは高度ですし、CanvasやWebGLも同様です。アニメーションGIFはありますが、あまり多用されないでしょう。そんな訳で一度表示したら動きが感じられないサイトが多いのですが、そんな時こそライブラリを使ってみましょう。今回はDOMを...
Path Slider - SVGをJavaScriptでアニメーション
SVGの良いところはベクターベースなので縮小、または拡大しても綺麗なまま表現できること、そして一般的に画像よりも軽量ということです。さらにJavaScriptとの親和性も高いのが開発者にとって嬉しいことです。とはいえ、SVGに対して高度な操作を行うのは大変です。すでにある、例えば今回紹介するPath Sliderのよう...
夜空ノ贈リ物 - CSS3を駆使して作られたアニメーション教本
CSS3が計算処理やアニメーション処理をサポートしたことによって、CSS3を駆使した作品が増えています。こんなことまでCSSでできるのかと驚かされるものも多いです。そんな作品を作ってみたいと思う方もいるのではないでしょうか。そんな方にぜひチェックして欲しいのが夜空ノ贈リ物です。CSS3を駆使して作られた作品であり、CS...
ezrgif - 画像をエフェクトを加えてアニメーションGIFに
アニメーションGIFは通常の画像よりもインパクトがあります。しかし一コマ一コマ作る手間は非常に大きく、動画などを使って生成することの方が多いでしょう。手元にアイコンリソースがあっても、それを動かすのは大変です。そこで使ってみたいのがezrgifです。アイコンファイルに簡単にアニメーションを追加するソフトウェアです。##...
Micron.js - CSSアニメーションをJavaScriptで制御
CSS3によってアニメーション機能が強化されています。JavaScriptで動きを書かなくて良くなっているのは良いことですが、それでもユーザ操作を受けて動かしたり、より細かく制御するためにはJavaScriptの存在は欠かせません。そこで使ってみたいのがMicron.jsです。CSSアニメーションをJavaScript...
Vivify - 多彩なパターンのCSSアニメーションライブラリ
Webアプリケーションが多機能化するのに合わせてアニメーションは欠かせない要素になってきています。ユーザがボタンを押した時、エラーになった時などアニメーションによってユーザビリティが大幅に変わってきます。そんなユーザ操作の結果などに使いたいCSSアニメーションライブラリがVivifyです。## Vivifyの使い方Vi...
WAIT - あるシーンの画像からアニメを検索
日本では毎日たくさんのアニメが放映されています。あまりにも多くの種類があり、二期など続編もあるので、あるシーンだけ見て何のアニメか当てるのは非常に難しいでしょう。そこで使ってみたいのがWAITです。アニメの特定シーンを当てるのに特化した検索エンジンです。## WAITの使い方例えばこのワンシーンの画像。ちゃんと右側の検...
Animation Worklet Explainer - Web上でスムーズなアニメーションを目指す
HTML5の高い表現力によって、アニメーションはなくてはならないものになっています。しかしJavaScriptの書き方であったり、CSS3の使い方によってはアニメーションというのは非常に重たい処理で、スムーズに表示されなかったりします。そんな現状を変えていこうと活動しているのがCSS Houdiniタスクフォースで、そ...
jquery-bubble-text - テキストアニメーションのjQueryプラグイン
アニメーションはただ静的に書かれているのに対して何倍も見た目のインパクトがあります。ともすると見逃されてしまいがちなテキストもアニメーションすることによってユーザに見てもらえるようになります。そんなアニメーション、特にテキストを動かしてくれるライブラリがjquery-bubble-textです。## jquery-bu...
C0 - macOSで2Dアニメーション作成
アニメーションを作るのは簡単なことではありません。モーションであれば最初と最後を決めるだけで中間は自動的に補完してくれますが、細かい動きは自分で一コマ一コマ決めていく必要があります。今回紹介するC0は細かくコマを設定するアニメーションツールです。## C0の使い方メイン画面です。絵を描いて、次のカットでは薄くなった部分...
BorderColorAnimate - 枠線をアニメーションさせるjQueryプラグイン
ユーザのアクションに対して反応することで、相手のストレスを軽減できます。特にAjaxを使うSPAなどでは通信状態を適切に表示しておくのが大事です。何の反応もなかったら、ユーザは何度もボタンを押してしまうでしょう。一例として紹介したいのがBorderColorAnimateです。枠をアニメーションさせるという面白い方法で...
AniJS - 効果的なアニメーションとUIコンポーネント集
最近はWebデザインと言っても静的なものだけでなく、クリックやマウスオーバー時などのイベントに基づくアニメーションなども必要になっています。それによって一歩先行くデザインに仕上がります。しかしアニメーションはちょっとした違和感などで台無しになってしまう可能性も秘めています。今回はそんな失敗を防ぐべく、AniJSを紹介し...
tScroll - 多彩なテキストアニメーションライブラリ
単なるテキストだと見過ごされてしまうかも知れません。そこで必要になるのが目立たせるための工夫です。文字の色を変えたり、フォントを変えたりすることもできますが、ちょっと安っぽくなってしまうこともあります。そこで使ってみたいのがtScrollです。文字をアニメーションさせることで印象づけるテクニックが使えます。## tSc...
curvejs - 曲線を使ったアニメーションライブラリ
Web上でアニメーションを描くのはとても面倒です。一度表示するだけであればこだわったリッチな描画も可能ですが、アニメーションとなると話が変わってきます。Canvasで描画している場合は、その内容を消す操作が必要です。文字が揺れるようなアニメーションを実現したかったらcurvejsを使ってみると良さそうです。## cur...
ShuffleText.js - マウスオーバーでテキストシャッフル
映画などでよく見られるテキストがシャッフルされて徐々に表示されていくアニメーション。単純に文字を表示するよりもインパクトがあって思わず目を引きつけられることでしょう。そんな演出が簡単にできるライブラリがShuffleText.jsになります。## ShuffleText.jsの使い方アニメーションGIFではちょっとした...