Web2.0 Dock メニューを Tween.js で実装する （Webber 2.0 Dock Menu）

JavaScriptのエフェクト処理を中心にしたライブラリを利用して、Web2.0 Dockの実装方法が紹介されている。Dock 処理の実装にはTween.js を利用してアニメーション処理が行われているので、同様の処理を独自に作成する際にも参考になる。

エフェクトライブラリであるTween.js を利用して、Web2.0のDockを簡単に実装できる。実際の動作サンプルとJavaScriptコードは、ダウンロードできるようになっているので、参考になる。もちろん、そのままでも問題なく利用できる。

Dockが画面上部から出てくる

Dock表示領域にマウスを重ねると、Dockが表示される

Tween.js はエフェクト処理別にライブラリ化された処理の１つ。他にはOpacityTween.jsなど半透明処理を行うライブラリなど全部で6種類に分割されている。非常に軽量で、扱いやすいライブラリで go2web20.net などでも利用されている。