asamuzaK.jp

text-decoration : blinkは昔から嫌われている装飾効果である。 自分でも鬱陶しくて嫌いだ^^;

でも、視覚的な効果としてバツグンであるのは事実である。 というか、故にこそずっとチカチカされるのは目障りなのであるが^^;

とはいえ、注意をひかせるために使いたい(こともある)…

そこで、折衷案。

と胸をはるほどでもないのだが…。 文書のロード時にちょっとだけ点滅させてあとは通常通り、というスクリプトを作ってみた。

特定要素の特定クラスを点滅させるスクリプト(ループ可)

理屈は簡単で、ロード時などから一定時間が経過したら点滅の装飾効果を取ってしまえばいい。 もし一定間隔で繰り返したい場合はsetTimeout()でループ処理させる。 というわけで、以下が当初のスクリプト。

function blinkTimer(bool) {
  if(document.getElementsByTagName) {
    var elm = document.getElementsByTagName('要素名');
    var l = elm.length;
    if(bool) {
      for(var i = 0; i < l; i ++) {
        if(elm[i].className.match('クラス名')) {
          elm[i].setAttribute('style', 'text-decoration : blink;');
        }
      }
      setTimeout("blinkTimer(0)", 3000);
    }
    else {
       for(var i = 0; i < l; i ++) {
         if(elm[i].className.match('クラス名')) {
           elm[i].setAttribute('style', 'text-decoration : none;');
         }
       }
       // setTimeout("blinkTimer(1)", 10000); /* ループ処理の場合 */
     }
   }
}
onload = blinkTimer(1);

ところが、MSIEは、text-decoration : blink;を無視する(無視すること自体は仕様では許されている)。 当然、MSIEでは期待通りの効果は得られなかったが、でもそんなことはすっかり忘れていたので、無駄なデバッグ作業に勤しむ羽目になった(泣。

修正スクリプト

というわけで、MSIEにも対応させた修正スクリプト。 便宜的に5秒間点滅（ループ無し）としているが、もちろんその数値はいくらでも変えればいい。

/**
 * blinkTimer Ver. 2.1.0
 * 特定クラスを持つ特定要素を一時的に点滅（ループ可）
 * Copyright (c) 2008-2016 Kazz
 * http://asamuzak.jp
 * Dual licensed under MIT or GPL
 * http://asamuzak.jp/license
 */

(function(_win, _doc) {
  "use strict";
  function blinkTimer() {
    var settings = {
      q: ".attention",  // 点滅させる要素のquerySelector
      c: 5,             // 点滅回数（点と滅で1回）
      t: null           // ループさせる場合のタイマー値（ms）
    };
    function blinkElement(o) {
      var x = o.q, l = x.length, i;
      if(l > 0 && o.count < o.c) {
        for(i = 0; i < l; i++) {
          var y = x[i];
          y.style.visibility = y.style.visibility === "visible" ?
            "hidden" : "visible";
        }
        o.count++;
        !o.bool && (
          _win.addEventListener("error", function() {
            clearTimeout(o.timer);
          }, false),
          (o.bool = true)
        );
        o.timer = setTimeout(function() {
          blinkElement(o);
        }, 500);
      }
      else {
        for(i = 0; i < l; i++) {
          x[i].style.visibility = "visible";
        }
        o.t && setTimeout(blinkTimer, o.t);
      }
    }
    (settings.q = _doc.querySelectorAll(settings.q)) && (
      settings.c = settings.c * 2,
      settings.count = 0,
      settings.bool = false,
      settings.timer = null,
      blinkElement(settings)
    );
  }
  _doc.addEventListener("DOMContentLoaded", blinkTimer, false);
})(window, document);

試しに動かしてみていくら間隔を置いても繰り返し点滅すると鬱陶しさは残ったので最終的にループ処理は見送ったが、実際の使用例はOver 30s' Futsal Club TOB。