ヘイ!イェイ!サイトやブログに 3D ボタン表示してみよー!

3D ボタンだよー!ぴよぴよ
「ヘイ!イェイ!」とか無駄にテンション上げてみましたよー!ぴよぴよ

平面はつまらないー!

少し前に IDEA*IDEA さんで あらゆるサイトを3Dに変換する『LAB! – 3D it!』がすごいな って記事で LAB! – 3D it! が紹介されていました!

個人的には立体的な表現も結構好きだったりします〜!
平面のウェブがちょっと立体的に、奥行きのある空間に感じれたら面白いですよね〜w
ってことで、3D ボタンの簡単な表示方法と「3D it!」の説明を少ししたいと思いまーす!

3D にして楽しむ!

LAB! – 3D it!

まず「3D it!」の説明から!
LAB! – 3D it! にアクセスすると左側に上の画像の様な部分があると思います!

zDepth, maxElems, perspective の3項目の数値を変更すると結構ニュアンスが変わってきますので、お好きな値に変更して下の「Drag me to your bookmark bar!」の部分をブックマークバーなどにドラッグするとブックマークレットの登録ができます!

  • zDepth: 数値を大きくするとレイヤー間の距離が広くなり奥行き感が増します!
  • maxElems: 3D を適応させる要素数の上限です!
  • perspective: 小さい数値の方が変形度合いが強く面白いと思います!

3D - actyway.com

actyway で使ってみました!

3D - actyway.com

「みょーん!」ってなりますよねw

3D - actyway.com

フッター部分のモコモコ、実はこんな感じだったのです!!
ちょっと恥ずかしいw

こんな感じで普段見れない様な部分まで見れてしまって面白いですよね〜w

サイトやブログに表示!

ブックマークレットの URL

「3D it!」はブックマークレットなので、ブックマークの URL 部分には「javascript:〜」ではじまる文字列が書かれています。

アンカータグで JavaScript を使う

ブックマークレットの URL 部分は、アンカータグの href 属性で指定しても使えますので、上のような感じで書けば簡単に表示できます。

3D ボタン

たとえばこんな感じ!

ってことでぜひ試してみてくださーい!

どうなってるの?3D it!

3D it! 実行時のElements

「3D it!」実行時のソースを見るとマウスに連動して、忙しく数値が変動している部分が見れます。(※ Chrome の Developer Tools で Elements を表示)

ブックマークレットを実行すると body と div に CSS3 の transform が適応されてマウスやスクロールに応じて数値を変更している感じでしょうか。実際この JavaScript 読めても書けないし、そもそもこんな奇抜なアイデア思いつかないなーと感心させられました><

で、 CSS3 の transform と言えば、わたしの中では 以前ブログにも書いた、Mozilla が Firefox 4 のリリースキャンペーンでやっていた「Virtual Park -Tumucumaque-」です。もう1年以上前の話だったので、さきほど確認したらサイトは表示されませんでした><

Virtual Park -Tumucumaque-

こちらの箱は Twitter で「#mozpark」を含んだツイートをすると表示されるのですが、CSS3 の transform を使って表示されていました。

CSS3 の transform で変形のイメージ

自分でも色々と触ってみた記憶はあるのですが、かなりうる覚えです。確か div を3つ用意して transform で変形させて立体的な箱に見せて表示させていました。このような沢山の緑の箱の配置で、奥行きのある空間を森のように演出されていました!アイデアですよね〜w

以前遊びで触っていた時の固定ページが見つかりましたので、一応リンク貼っておきますw ソースコードは参考にならないと思います><
transform01

ほぼひとりごと

個人的には、平面のモニターに奥行きのある空間が表示されているとテンション上がります!さらにそれが操作出来たりしたら楽しく感じます〜w

追記!

WordPress や PHP Ninja で有名な @miya0001 さんがボタンを表示してくださいました!!ありがとうございまーすm(__)m<ウレシスギタョ!!

ヘイ!イェイ!サイトやブログに 3D ボタン表示してみたぜー! | firegoby