こちらで更新継続中。「Caaaaat (Responsive Cat)」レスポンシヴ・デザインを利用した、テックデモ・アート作品

「Caaaaat (Responsive Cat)」レスポンシヴ・デザインを利用した、テックデモ・アート作品

I’m responsive. ということらしいです。

最近WEB界隈ではあちこちで「レスポンシヴ・デザイン」という単語をよく見かけるようになりました。WEBサイトを動的にデスクトップ・ラップトップPCやスマートフォン、タブレットなどの解像度に合わせたデザインに変更できるということで、注目されている技術です。

今回はこのレスポンシヴ・デザインを利用した、面白いテックデモ・アート作品をご紹介。

伸びて縮んで、最後には太っちゃうネコ

今回紹介するのはroxikというサイトを運営しているWEBデザイナー/アーティストの城戸雅行という方の作品で、Caaaaatです。

caaaaat1

早速開いてみると、ブラウザの幅めいっぱいグニョーンと伸びたネコが出てきますwwしかもただの静止画ではなく、かなりヌルヌル動くネコです。

ここからブラウザ幅を狭めていくと……、

fat

CATからFATに変わりました。ここらで気がついたのですがtitleの内容も動的に変わっていくようで、タブに表示されるページタイトルも逐一変わるようです。ネコの胴体の長さによっては”Caaaaat”の”a”の数も変わっていきます。

ではここで再びブラウザの幅を広げていくと、

fat2

またグニョニョーンと思い切り伸びきった後に手足が離れて弾け……、

fat3

ボヨン!と収縮してしまいましたwwwここまでくると後は特に動作はないのですが、一連のアニメーションが滑らかで、癖になる”柔らかさ”が感じられる作品となっています。

なお左上にあるchange viewをクリックすると、

bone

このようにネコのボーンが確認できますよ。

WEBデザインなどに興味が無い人でも、この作品のアニメーションやレスポンシヴ・デザインの面白さが感じられるかと思いますので、是非覗いてみてくださいね。作者さんのサイトでは他にも面白い作品が多く公開されているので、そちらも必見です。

Caaaaat

roxik

書いた人はこんな人

壬生狼

壬生狼(みぶろ)と申します。 miburo666/ルプス(Lupus)は概ね同一人物。 ゲーム、音楽、映画/アニメ、イラストなどが趣味。 ここでは音楽や映画/アニメを中心に、趣味関連の記事を書いていきます。


記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。
スポンサーリンク

シェアする

スポンサーリンク