<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KRS8CM');</script>

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は、仮想環境だったのでなんともいえませんが、ガタガタの動きです。
独自実装だから仕方ないか…ガチョーン。


<script type="text/javascript" id="zsiqchat">var $zoho=$zoho || {};$zoho.salesiq = $zoho.salesiq || {widgetcode: "siq61aecceb7ad0c24af4e4670187f03564ddd615eb71422e1b7169309fa9b25e89", values:{},ready:function(){}};var d=document;s=d.createElement("script");s.type="text/javascript";s.id="zsiqscript";s.defer=true;s.src="https://salesiq.zohopublic.com/widget";t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t);</script>