Warning: reset() expects parameter 1 to be array, boolean given in /home/users/2/mods.jp-makoto-tanaka/web/wordpress/wp-content/themes/xeory_base/lib/functions/head.php on line 143
このエントリーをはてなブックマークに追加

読了: 約 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

http://black-flag.net/jquery/20110624-3251.html

http://kachibito.net/web-design/lettering-animate.html

最近デザイナーさんでも簡単に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

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'