What am I doing?

Twitter

Recent Posts

Hatena Hotentry

Products

Site

flickrer - flickrダラ見サイト

入力されたキーワードをもとにflickr検索し、あとはダラダラとスライドさせたり、リンクをたどったりできるサイトです。
完全に自分用ですが、もしよかったら使ってください。


Link: flickrer - flickrダラ見サイト
Description: flickrダラ見サイト - flickrer作ってみた at HouseTect, JavaScript Blog

JavaScript

jAudio - jQuery Plugin

jsdeferredを使ってのアニメーション制作。
HTML5のaudioタグを使い易く操作するためのjQuery Pluginです。
Demoでは映像とアニメーションを意識した世界観を描いています。特にCSS3の-moz-radial-gradientを使って太陽を作ってみました。


Demo: jAudio - HTML5 audio DEMO
Description: HTML5のaudio用jQuery Plugin - jAudio

squareDeferred

jsdeferredを使ってのアニメーション制作。
四角いdivタグが縦横無尽に移動します。アニメーションをループさせているので、永遠と続くのが特徴です。


Demo: squareDeferred
Description: squareDeferred

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.