ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - アニメーションの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2015/05/11

wheelnav.js - 目を引く回転型メニュー

WebのUIは基本的に静的で、アニメーションはそれだけ目を引きます。かといって今は簡単にアニメーションが実装できるようになっていますので、ほんの少し揺れた程度ではスルーされてしまうでしょう。そこでwheelnav.js

Missing

  • 2015/04/21

Cquence – 簡易的なアニメーションをお手軽に

Web上でアニメーションを流すのはFlashの時代から行われてきましたが、その作成はとても大変なイメージがあります。キャラクターをパーツごとにばらしたり、その動きを制御すると言った具合です。シーンごとのアニメーションを簡単に制御できれば良いという程度であれば大げさなツールは使わず、Cquence

List

  • 2015/04/08

Dom-Animator.js – 誰も気づかない…ソースコードの中でアニメーション

時々Webサイトのソースコードを見るとそこに求人情報であったり、開発時の文句であったり、何らかの秘密のメッセージが埋め込まれていたりします。デザインの綺麗さについソースコードを見てしまうなんて人もいるのではないでしょうか。そんな方達を期待してWebサイトに仕込んでおきたいのがDom-Animator.js

List

  • 2015/03/16

animachine - Google Chrome上でGreenSockを使ったHTML5アニメーションを作成

GoogleがFlashバナーを自動的にHTML5に変換する広告配信技術を発表しました。これにより既存資産を活用したままモダンなWeb環境においても広告配信が可能になります。つまりHTML5でもFlash並のアニメーション表現が可能になっているのです。そこでさらに高度なアニメーションを実現したい時に使えるのがGreen...

List

  • 2015/02/26

Digital Rain - マトリックス風表現をGoで

マトリックスと言えば黒い画面の中に半角文字が流れ落ちてくる表現が有名です。あれを見るとマトリックスを思い出すという方も多いのではないでしょうか。Digital Rainではまさにそんな表現を行っています。特徴的なのはGoを使っている点でしょう。## Digital Rainの使い方!こんな感じです。Canvasに描画し...

None

  • 2015/02/24

gifify - コマンド一つで動画をアニメーションGIF化

アニメーションGIFが人気です。動画とは違って再生ボタンを押したりする手間もなく、音がないのが安心なこともあります。短い間で何度も繰り返されるとじわじわくる動画にぴったりです。そんなアニメーションGIFを動画から作成してくれるのがgififyです。動画とはまた違う面白さを秘めたコンテンツを作ってみてください。## gi...

List

  • 2015/02/21

frame.js - FlashのようにWebGLアニメーションを編集

まだ開発途中ながらこれは期待大!WebGLはHTML5上で3Dグラフィックスを扱うために作られた技術です。その可能性は大いに感じられるところですが、扱うのが難しいためになかなか手出ししづらいものがあります。ごりごりコーディングするのは面倒で、やはり専用のエディタが欲しいと思うでしょう。そのためのエディタになるのがfra...

List

  • 2015/01/20

snabbt.js - DOM/テキストのシンプルなアニメーション

HTML5登場以降、JavaScriptやCSS3を使ったアニメーションが人気になっています。一言でアニメーションと言っても様々で、イラストを使ったものもあれば、単純にテキストやDOMを動かすと言った類のものもあります。今回紹介するsnabbt.jsは後者のシンプルなアニメーションライブラリになります。クリックやマウス...

List

  • 2014/12/13

RAMAnimatedTabBarController - iOSアプリのタブバーでさり気ないアニメーション

マテリアルデザインの肝になるのはリアルの物体を意識させる操作感です。押した時、フォーカスした時にそれぞれアニメーションを使いつつユーザに操作したという実感を提供するのが大事です。iOSアプリのタブバーではハイライト表示を切り替えて今どのタブにいるのかを明示しますが、RAMAnimatedTabBarController...

List

  • 2014/12/12

SVG Morpheus - SVGアイコンの切り替えをアニメーション化

SVGの良いところは画像と異なりバイナリではないので解析すれば様々な利用法が考えられる点にあります。単純にブラウザ任せに描画するだけでは勿体ないでしょう。ぜひその構造を読み取って、SVGならではの面白さを考えてみましょう。今回はその一つ、SVG Morpheusを紹介します。SVGアイコンから別なアイコンへのモーフィン...

List

  • 2014/11/27

vivus - SVGを解析してアニメーション表示

SVGはベクターベースのドローなので、どれだけ拡大しても綺麗に表示されます。レスポンシブや高解像度化するスマートフォン対応を考えれば画像よりもSVGのがメリットがあると言えるでしょう。もう一つのメリットとしてJavaScriptから操作するのが容易と言うことがあります。今回はその仕組みを使ったSVGアニメーションライブ...

List

  • 2014/11/23

Walkway.js – SVGコンテンツを取得して自動アニメーション

HTML5が正式勧告になり、SVGの利用も今後ますます広がっていくものと思われます。ベクターベースのドローができるので拡大表示したとしても綺麗に描けるのが特徴です。さらにもう一つ、アニメーションが書けるというのも特徴です。とはいえSVGアニメーションを作るというのはそうそう簡単ではありません。もうちょっとシンプルなアニ...

List

  • 2014/11/16

GreenSock – 高速なHTML5アニメーションライブラリ

HTML5によってかつてFlashが行っていた領域がJavaScript/CSS3によって実現されています。その一つにアニメーションがあります。これまでFlashバナーなどで提供されていたアニメーションが、Web標準の技術だけで行えるようになっています。とはいえ、できるようになったと言ってもやり方は簡単ではありません。...

List

  • 2014/11/08

Page Loading Effects - ページ読み込み中はアニメーションを表示しよう

Webアクセスで最もストレスになるのはページローディングではないかと思います。95年くらいの時は10分待って画像が表示されるなんてのはざらだった訳ですが、今はそんな悠長に待っていられる時代ではありません。画像リソースのみならずページがさくさくと表示されて欲しいものです。もし表示が遅かったとしても解決する手段がない訳では...

List

  • 2014/10/26

whirl – CSSだけで実装されたローディング表示

Webアプリケーション化が進み、Ajaxを使ってデータを取得したりJavaScriptで画面を再描画するようになると、その処理途中にユーザに触って欲しくないことが増えます。特にフォーム送信の二重処理は厄介です。そこでボタンを一時的に無効にしたり、処理中である旨を通知する必要が出てきます。そのためのライブラリがwhirl...

List

  • 2014/10/26

Letterbolt - 文字をアニメーションしながら描くライブラリ

テキストをアニメーション化するライブラリはこれまでにもありました。多いのはタイプライター風に文字を表示するものや、点滅させたり、文字色を変化させると言ったものもあります。今回はさらに高度なテキストアニメーション機能を追加するLetterboltを紹介します。アニメーションしながら文字が書かれていくという、面白いライブラ...

List

  • 2014/10/20

Gifshot – Webカム/動画/画像からアニメーションGIF生成

アニメーションGIFは今なお人気です、というかここ数年さらに人気が高まっているのではないでしょうか。動画とは違いプラグインもCPUパワーも殆ど使わずに再生できますし、音がないのが逆に創造性を働かせてくれます。そんなアニメーションGIFを各種リソースから生成してくれるソフトウェアがGifshotです。Yahoo! Inc...

List

  • 2014/07/12

Agile Css3 Engine – JavaScriptを使って高度なCSS3アニメーションを実現

CSS3を使えば簡易的なアニメーションや回転もサポートするなど、より高度な表現が自由にできるようになります。とは言え、タイミングをずらしたりするのをすべてスタイルシートで行うのは大変です。そこでJavaScriptを使ってCSS3を出力しようと言うライブラリがAgile Css3 Engineになります。アニメーション...

List

  • 2014/06/28

Bounce.js – ユーザビリティ向上に使えそうなCSS3によるアニメーションライブラリ

Webは基本的に表示されると全く動かないか、Flashによるスプラッシュのように最初だけアニメーションするかのどちらかが多いように思います。最近ではパララックスのようにスクロールによるアニメーションもありますが、それでも一旦表示されてしまえばそこで終わりです。ユーザアクションによるアニメーションを実装したかったらBou...

List

  • 2014/04/15

Animated WWDC 2014 Logo - WWDCのロゴをアニメーションさせるスクリプト

WWDC 2014が発表されました。今年はどんな面白い話題が出てくるでしょう、今からわくわくしている人も多いはずです。そんなWWDC 2014のページにはカラフルなタイルが並んだ中にAppleマークが浮かぶデザインがされています。そのデザインを真似し、さらにアニメーションまで行ってしまうのがAnimated WWDC ...