読了: 約 3 分

前回のjQuery10日連続企画は企画倒れになったので、
通常のペースで書いていきます。


今日は今まで見た事がないjQuery・動きをしたサイトを紹介し、
紐解いていこうと思います。

bunkaikei.js

http://bunkai-kei.com/special/Bridge-of-Babel/

分解系のサイトと呼ばれているらしいですが、初めて聞きました。
jsにもbunkaikei.jsと書かれているので、その様に呼ばれているのでしょう。

TED×Portland

http://tedxportland.com/

こちらのサイトは除除画像が薄くなって、残像が残って伸びていくような
JavaScriptを使っているみたいですね。

create.js

最近話題になっていたcreate.js。
HTML5のcanvasに使用できるjsを幾つか同梱しているようで
これからニーズが高まっていくのではないでしょうか。
http://gskinner.com/blog/archives/2012/03/announcing-createjs.html

create.jsのダウンロードやデモはこちらから
CREATEJSやEASELJS・TWEENJSを実際に使って作られたサイトは右側のviewを押すと
そのサイトに遷移します。

CREATEJSで作成されたゲームのサイト

atari

create.jsの日本語記事
http://f-site.org/articles/2012/03/17151938.html

キーボード操作でページ遷移（スライドコンテンツ）を行うことができるjQueryプラグイン「ASCENSOR.js」｜BLACKFLAG
jQueryをはじめ、HTML、CSS、JavaScriptなどのWeb制作に必要な情報をメモするWebクリエイター向けブログ。
キーボード操作でページ遷移（スライドコンテンツ）を行うことができるjQueryプラグイン「ASCENSOR.js」｜BLACKFLAG
BLACKFLAG BLACKFLAG
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate
使いどころもありそうだったので備忘録。文字をアニメーションしながら少しずつ表示させていく様なエフェクトを実装できるjQueryプラグイン・Lettering Animateです。
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate
かちびと.net かちびと.netAMP

最近デザイナーさんでも簡単にFlashのようなアニメーションを作成して、
JSで書き出す事が出来るものとしてToolkit for CreateJSが有名になってきましたね。

adobeの本サイトから出ていますのでダウンロードは下記から。
Flash Professional CS6 / Toolkit for CreateJS

「Animify」jQueryプラグイン

http://animify.com/demos/basic.html
こういう背景を動かしたい時ってありますよね。
ただ、ライブラリとして取ってくるだけじゃなくて、
HTML5のcanvasで背景に円を描画して、ランダムに動かすのかな等
想像してみると色々方法があって楽しいですね。

JavaScript参考サイト

私が勉強のためにお世話になっているサイトまとめ
チームラボ社に勤めていらっしゃるhisasann氏のブログサイト
幾つものJavaScriptでの動きを独自に書かれていて、世界観も素敵だなぁと思います。
http://hisasann.com/

Flashの本で有名な野中氏のブログサイト
HTML5のテクニカルノートというものが書かれていて、
EaselJSで図形を描くというエントリーで
EaselJSの使い方が詳細に書かれているので参考になります。
http://www.fumiononaka.com/Business/html5/FN1202005.html