Recent Posts
Hatena Hotentry
Products
Site
flickrer - flickrダラ見サイト
入力されたキーワードをもとにflickr検索し、あとはダラダラとスライドさせたり、リンクをたどったりできるサイトです。
完全に自分用ですが、もしよかったら使ってください。
Link: flickrer - flickrダラ見サイト
Description: flickrダラ見サイト - flickrer作ってみた at HouseTect, JavaScript Blog
JavaScript
jAltTip - jquery plugin
指定されたselectorにツールチップを表示するプラグインです。
classを渡して自分オリジナルなチップにすることが可能です。
Demo: jAltTip - jQuery Plugin
Description: jQueryでツールチップを表示するシンプルなコード
addCommand - htmlElementDance
自作アニメーションプラグインaddCommandを使って、html要素を縦横無尽に移動させてます。
少ないJavaScriptコードで実装されているのが特徴です。
動作はWebkit系のブラウザ、Safari／Google Chromeで見ると軽快に動作します。
Demo: addCommand - htmlElementDance
addCommand - HelloWorld1
自作アニメーションプラグインaddCommandを使って、1つのPNG画像をオープニングシーンのようなものを作ってみました。
アニメーションのHelloWorldとして参考にしていただけたらうれしいです。
動作はWebkit系のブラウザ、Safari／Google Chromeで見ると軽快に動作します。
Demo: addCommand - HelloWorld1
Description: JavaScript - HelloWorld
addCommand - HelloWorld2
こちらも自作アニメーションプラグインaddCommandを使ったHelloWorldですが、
CSS3のText-Shadowで炎を演出しています。
動作はWebkit系のブラウザ、Safari／Google Chromeで見ると軽快に動作します。
Demo: addCommand - HelloWorld2
Description: JavaScript - HelloWorld
addCommand - jquery plugin
jquery.animateをさらに使いやすくしたjQuery Pluginです。
1つずつ順番にアニメーションをさせることが可能になり、シーンの作成やストーリーの作成に最適です。
Demo & Description: addCommand - jQuery Plugin
jStack - jquery plugin
画像をペラペラとめくるjQuery Pluginです。
ただめくるだけではつまらないのでシャッフル機能を付けてみました。
シャッフル時のアニメーションがお気に入りです。
Demo & Description: jStack.js - jQuery Plugin
protoBox2d.js
物理演算エンジンのJS版Box2dを手軽に扱えるようにしたJavaScript Libraryです。
Safari、Chromeなど高速なブラウザで是非ご覧ください。画像を投げたりできるので楽しいと思います。
Demo & Description: protoBox2d.js - Box2d JavaScript Library
jMerrygoround - jquery plugin
jMerrygoroundはアマゾンのブログパーツのように画像がグルグル回るjQuery Pluginです。
画像の回り方を開発者が追加できるように作られているので、好きなモーションで回転することが出来ます。
Demo & Description: jMerrygoround - jQuery Plugin
Reflector.js
Reflector.jsは画像に水面のような反射効果を付けるJavaScript Libraryです。
Demo & Description: Reflector.js - JavaScript Library
RunAwayFromMouse.js
マウスから逃げるからインスパイアされて制作しました。
jQueryを使っているので、コードも長くなくシンプルです。
Demo: Description: jQueryでマウスから逃げるRunAwayFromMouse書いてみた
↑ではマウスの移動時に要素を動かしていましたが、それだとマウスが止まった瞬間に要素の動きもピタッと止まってしまうため不自然になってしまいました。
そこでタイマーを使用して違和感なく要素を動き続けるようにしたパターンも作ってみました。
Demo: Description: jQueryでマウスから逃げるRunAwayFromMouse書いてみた Part2
jDropper - jquery plugin
jDropperは画像やHTML要素が降り注ぐjQuery Pluginです。
Gameのような遊び方もふまえたJavaScriptサンプルとして制作しました。
Demo & Description: jDropper.js
Kingbonbi - jquery plugin
見たまんまのキングボンビーが振ってくるjQuery Pluginです。
画面内を崩壊するブログパーツが流行っていますが、キングボンビーで埋め尽くされると面白いと思い作ってみました。
Demo & Description: Kingbonbi.js
Ripple.js
Ripple.jsはcanvasを使って波紋のような、月食のようなものを描くscriptです。
マウスの移動に少し遅れて波紋が広がって行くのが特徴です。
Demo: Ripple.js
Description: canvasを使って波紋が広がるripple.js作りました
XYZ.js
既存であるFlashで作られたランダムで動くモーションをJavaScriptで作ってみました。
画面内をあっちいったりこっちいったりするHTML要素が面白いと思います。
jQueryを使用しての制作。
Demo & Description: XYZ.js
ActionScript
HelloWorld
文字のラインにそってCircleが描画されていくHelloWorldです。
Circleだけではなくアルファベットでも描画するパターンも作ってみました。
Demo & Description: ActionScript3 - HelloWorld
Papervision3D
ActionScriptで3D空間演出できるPapervision3Dライブラリを使ったアニメーションです。
ドット風マリオを使ってみました。
Demo & Description:
Blogs
HouseTect, JavaScripter Blog
Javascript、Actionscriptあたりをメインに遊んでいるプログラマーのブログです。
ちょっぴりアートでオモロ〜なものを作ってます。
Link: HouseTect, JavaScripter Blog
NoTechnoNoLife, 海外のアンダーグラウンドな情報ブログ
このブログは海外のちょっと面白い画像や動画を紹介しているアンダーグラウンドブログです。
TechnoやHouseといった音のマッシュアップ系の動画なんかも紹介しています。
Link: NoTechnoNoLife, 海外のアンダーグラウンドな情報ブログ
DigitalGrounder.COM, 海外のデジタルアートブログ
海外のイラストやデジタルアートを中心にニッチなニュースに特化し、Flickrで見つけたアートやLEGOなどを紹介しているブログです。
Link: DigitalGrounder.COM, 海外のデジタルアートブログ
Contact
hisasann
自慢のMacBook ProでBlog書いたりコード書いたりしている一児のパパです。
音はエレクトロならなんでも聞きます。Prodigyなんて最高ですね。
Flashでアートなことしたいのですが、いいアイデアがなくて全然はかどってないです。
いや、ちょびっとしたものなら作れてるんですけどねっ！
デザインアートな集団の方、もしよかったらこんなボクいかがですか？笑
Mail:
Twitter: Twitter / hisasann
I love Javascript.