CSS3とWebkitでガチョーン


ガチョーン(bookmarklet)

Webkit(Safari、Chrome)のみ。
サイトによっては動かない場合もあります。
私はWebkit大好きっ子ですが、独自進化し過ぎでしょうか。

機能としては、ブックマークレットを動作させると、表示中のページのhead内にlinkタグを作って、このサイトにある「gachorn.css」を読み込みます。
すると、webkitの独自実装である-webkit-keyframesで、bodyタグのscaleをtransformさせる動作を3回繰り返して、かの「ガチョーン」っぽい動きを実現しています。

試してみたところ、MacのSafariが一番いい動きをしました。ChromeとモバイルSafariは、上記のように動画があると、そこだけガチョーンしてくれません。Chromeは、画面の描画も美しくありませんでした。
WindowsのSafariは、仮想環境だったのでなんともいえませんが、ガタガタの動きです。
独自実装だから仕方ないか…ガチョーン。


このページをみんなにシェアする

お問い合わせ

ファイルサイズが大きすぎます。