ちょっとだけ点滅させるスクリプト
特定クラスを持つ特定要素を一時的に点滅させるjavascript
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。
"ちょっとだけ点滅させるスクリプト"へのTwitter上でのコメントやRT
4件のツイートがあります。
ツイート 1
サイトで公開しているサンプルソースについて、一部をMIT/GPLのデュアル・ライセンスとすることにした http://t.co/ZLBCKDYP http://t.co/FMZwB1v0 http://t.co/uWLha6BP http://t.co/aYXBnUBk など
ツイート 2
よかったらどうぞ http://t.co/qU96zRuEj7 RT @Stocker_jp: blinkタグなき今、文字の点滅はJavaScriptでやるしかないか…いやCSS3でもできるかな。
ツイート 3
久々にちょっと手を加えた asamuzaK.jp : ちょっとだけ点滅させるスクリプト ~ 特定クラスを持つ特定要素を一時的に点滅させるjavascript https://t.co/e1rPPv3TFX
ツイート 4
昔、こんなの作ったけど… asamuzaK.jp : ちょっとだけ点滅させるスクリプト https://t.co/e1rPPv3TFX