Perfume 5th Tour 2014「ぐるんぐるん」の特設サイトのロゴをぐるんぐるんさせ続けるスクリプト

8月からスタートする、Perfume 5th Tour 2014「ぐるんぐるん」の特設サイトが公開されました。

Perfume 5th Tour 2014「ぐるんぐるん」

ページを見てもらうと分かるかと思いますが、ロゴマークの上にマウスのカーソルを合わせると回転します。ツアーのタイトルが「ぐるんぐるん」なので、このロゴマークをぐるんぐるんさせ続ける方法はないだろうかと思い、やってみることにしました。

ソースを見てみると、アニメーションはanimate-min.cssで定義されていました。CSS3によるものみたいです。ここで定義されている内容を参考に、ブラウザの開発ツールからCSSの定義を追加してみます。

なお、Animate.cssはMITライセンスによって作成、公開されているものなので、以下のコードもそれに従うこととします。

The MIT License (MIT) | Open Source Initiative

//transform-originは回転軸の位置、rotateが回転させる角度、opacityは画像の透明度
var keyf =
"@keyframes rotate{ \n" +
    "0%{ transform-origin:center center; transform:rotate(0deg);opacity:1} \n" +
    "100%{ transform-origin:center center; transform:rotate(360deg); opacity:1} \n" +
"}\n ";

// アニメーションの名称、1回の長さ、進行方法、開始のタイミング、繰り返しの回数、再生方向
var rotate = ".rotate{animation: rotate 1s ease 0s infinite normal;}";

var animation_css = document.styleSheets[4];
animation_css.insertRule(keyf, animation_css.cssRules.length);
animation_css.insertRule(rotate,animation_css.cssRules.length);

$(".leftMark").addClass('rotate');
$(".centerMark").addClass('rotate');
$(".rightMark").addClass('rotate');

ChromeだとaddRuleやinsertRuleは禁止されているようです。そのため、動作確認はIE(Ver.11)とFirefox(Ver.30.0)のみです。ベンダープレフィクスは省略しました。

開発ツールからの実行方法については以下の記事などを参照してください。

はてなブログで「購読中のブログ」の一覧を表示するスクリプト - Sprint Life

実行するとこんな感じです。TwitterがGIF画像*1に対応した時にテストで上げたものなので、ここに書いたコードとは挙動が異なりますが。

ぐるんぐるんの公式サイトのロゴをぐるんぐるんさせてみた http://t.co/suUio38VAa
— splicom (@splicom) 2014, 6月 19

応用すれば他のサイトでもアニメーションで遊べるかもしれません。

参考

*1:実際はmp4らしい