[CSS3+jQuery] 画像なしでどこまで作れるのか?の限界に(forkして)挑戦 – jsdo.pigg

jsdo.itで今診断テスト作ったら来月末ごろに3DS当たるかもよキャンペーンやってますよ。

それはそれで熱いんですが、私の中でいまブームになってるのは
GeckoTangさんが作ったjsdo.piggのfork祭り(勝手に祭り化)です。

まあとにかくSafariかChromeで実物を見ていただきたい。

jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

かわいい顔してるだろ…。これ画像使ってないんだぜ…?

見た瞬間ティンと来た。

2/24のつぶやき「http://jsdo.it/tsmallfield/counting_sheep2 と http://jsdo.it/GeckoTang/dOv6 合体させたら農場っぽくなりそう」

つぶやいたらtsmallfieldさんが実行してくれた。

背景付けてみた。forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

全く変更なしで合体させただけなのにこの統一感!シンクロ率半端ない!
この背景も画像ゼロなんですよ。fork元である羊数えるやつではCSSで描かれた動物も見れます。
で、その後「作ってくれる人いたらラッキー」なノリで追加案をつぶやいてみたんだけど、
深夜過ぎた所為か朝見たときforkされてなかったので、辛抱たまらんくなって自分で作ってみた。

UI付けてみた。forked from: 背景付けてみた。forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

ほらもうなんかアバターSNSっぽい!!!
繰り返しますがここまで画像ナシです。CSS3マジぱねーっす!

全fork元はこちら。

私が追加したものはこれだけ。

  • jQueryでチャットっぽいUIの追加
  • jQuery用のCSSチューニング
  • ふきだしスタイル変更ラジオボタンの追加
  • まばたきアニメーション(CSS3)
  • 口パクアニメーション(CSS3) ←form ミサワ祭り

(あのミサワ祭りがこんなところで役に立つとはw jsdo.it恐ろしい子…!)

UIにはforkされやすいようにjQueryを使いました。
現状まともに見れるのはChromeとSafariだけだけど、CSSだけでアメーバピグとか@gamesみたいな雰囲気になってるのがマジ凄くない?

今後も何かティンときたら追加するつもりでいるのですが、
WebSocketチャットの実装は共用サーバーだと無理だから出来なさそうです。
VPS持ってる方が実装してくれないかなーと思って記事にまとめてみました 😀

WebSocketチャット版jsdo.pigg登場の巻

ginpeiさんがWebSocketに対応させてるよ!

jsdo.piggを乗せてみた forked from: WebSocket触ってみた – jsdo.it – share JavaScript, HTML5 and CSS

これにフキダシとかの装飾がされたらと思うとwktkが止まらなーい!
発言が交互に繰り返されていくなら「吹き出し」風スタイルの方がしっくりしそう。
使われてるWebSocketのAPIサービスは「WebSocket試したいけど自分でサーバー周り用意するのは面倒」という時に便利そうです。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください