Webサイトではあまりアニメーションが使われることが多くありません。CSSアニメーションは高度ですし、CanvasやWebGLも同様です。アニメーションGIFはありますが、あまり多用されないでしょう。 そんな訳で一度表示したら動きが感じられないサイトが多いのですが、そんな時こそライブラリを使ってみましょう。今回はDOMをグニャグニャ動かすwiv.jsを紹介します。

wiv.jsの使い方

ほら、こんなにグニャグニャ。

幅を指定することもできます。

動く向きを変更したり、ミックスしたり。

さらにこんな派手な装飾も。ハートをたくさん配置して動かしています。

wiv.jsを使えば単なる四角だったDIVタグの囲みがグニャグニャと動き始めます。問題はこの使い道ですが、実際に役立つ場面は多くないかも知れません。しかし見た目のインパクトが大きいので、目を惹きつけたい時に使えそうです。

wiv.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

デモ jjkaufman/wiv.js: A library for a more wiggly div