読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

表示中のページ内の画像に落ち着きがなくなるブックマークレット

(WebKitブラウザ専用です。)
以下の行をコピーしてアドレスバーで実行して下さい。ブックマークに登録すればどのページでもワンクリックで動作するようになりますが、そこまでしてもらうほどのものかどうか…でも画像検索サイトで使うと楽しいですよ!

javascript:(function(){var l=document.createElement('link');l.rel='stylesheet';l.href='data:text/css,%40-webkit-keyframes%20restless%20%7B0%25%20%7B%20-webkit-transform%3A%20rotateZ(10deg)%3B%20%7D100%25%20%7B%20-webkit-transform%3A%20rotateZ(-10deg)%3B%20%7D%7Dimg%20%7B-webkit-animation-name%3A%20restless%3B-webkit-animation-duration%3A%200.5s%3B-webkit-animation-direction%3Aalternate%3B-webkit-animation-iteration-count%3A%20infinite%3B-webkit-animation-timing-function%3A%20ease-in-out%3B%7D';document.head.appendChild(l);})()

見やすくすると、

javascript:
(function () {
  var l=document.createElement('link');
  l.rel='stylesheet';
  l.href='data:text/css,<以下に記述>';
  document.head.appendChild(l);})()
@-webkit-keyframes restless {
  0% {
    -webkit-transform: rotateZ(10deg);
  }
  100% {
    -webkit-transform: rotateZ(-10deg);
  }
}
img {
  -webkit-animation-name: restless;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction:alternate;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
}

以下、コードの説明。

  1. 変数をグローバルにしないために無名関数の即時実行をした。
  2. link要素を生成して、所望のCSSのdata URIを指定し、head要素に追加。
  3. data URIは、タイプにtext/css、チャーセットはデフォルト(US-ASCII)、内容は通常のCSSをencodeURLComponentでエンコードする。
  4. CSS3のキーフレームを使ったアニメーションを記述(WebKitベンダー拡張を使用)