CSSとjQueryでカードダス

思いついたアイデアやキャラクターを「仮に実際に商品としてあったら」という定でCMやグッズ等を作ってみるという
趣味的なグループワークを知り合いがやってまして、
その製作物をお披露目するウェブサイトを自分が作ることになったわけなんですね。

でその最初のプロダクトの仮想グッズとして懐かしいガンダムのカードダスを模したヤツがあったので
実際にブラウザ上で引けるカードダスあったら面白そうだなと思い何も言わず勝手にバーッと作ってみた・・・

 

今は仮で20円時代の筐体の写真を当てはめてみてます。

 

ezgif-1418478358

 

あのレバー回すときの「ガシャガシャッ」って音と感触がたまらんです・・・
それと帯が付いた新しいカードの束・・・
今でもときめきます。

 

筐体やカードやらはcssで組み立て、クラスにアニメーション付けてjavascriptでオンオフのやっつけ仕様。
カードもランダムで出るのでチョットしたワクワク感が楽しめます。

 

引いたカードをバインダーみたいに記録したりレアカードには別途アニメーションつけたりしたらもっとワクワク感増すかもしれない・・・

csscarddas

 


>> MENU LIST

ABOUT

About me

+ Vital Sign

- YOUSUKE SUZUKI -

埼玉県在住のWEBデザイナー
諸々の練習のためブログを作ったものの見事な三日坊主に。

フィギュア・アニメ・映画が好き。
ももいろクローバーZはももか推し。

ポートフォリオ TNK WORKS

2014©tnk-works.com