oitake blog

いろいろリンク

おすすめリンク

最近のエントリー

カテゴリー

20101012:コメントとトラックバックを停止したことにより、このサイトはアーカイブとなりました。以降、ご連絡はみもねるのウェブサイトへお願いします。
20100703:新ナマコメ(ナマコメ 2)を公開しました。コメントビューア付きで送信面においてもパワーアップしています。
旧ナマコメは将来的に使用できなくする予定なので、可能な限り新ナマコメをお使いください。
20091127:oitake は みもねる になりました。当ブログは無期限更新停止となります。詳細は最新の記事をご覧ください。

スポンサーサイト

一定期間更新がないため広告を表示しています


2009.12.16 Wednesday | | - | - | -

ブルブル!(ブルブル 4)

(すったもんだがございましたが)「ブルブル 3」の修正版「ブルブル!」をリリースします。前回の暫定版に関する記憶はキレイに消去してから読んでね!


▲アニGIF作ってみました。

…「ブルブル!」は、マウスカーソルをテキストリンクから外すと、リンクの1文字1文字をブルブルさせるJavaScriptです。その点は、初代「ブルブル」から変わりありません。特長を列挙します。

・インストールするだけで全てのテキストリンクがブルブルします。
・ソースコードのユーザー定義変数(■で始まるコメントの直下にある変数)を変更することで、ブルブルの挙動をカスタマイズできます。
・ユーザー定義変数「brbr.f」にtrueを設定することで、class属性値に「brbr」と設定されたリンクにのみ反応するようになります。

初代からの修正点は以下の通り。

・prototype.jsと(いちおー)共生できるようになりました。
・実体参照が展開されないようになりました。
・少し軽くなりました。

欠点は以下の通り。

・タグを含むリンクには反応しません。
・WindowsのNetscape Navigator 7.1とOpera 9では実体参照が展開されてしまいます。
・MacintoshのNetscape Navigator 7.1では、エフェクトの適用中、リンクが消えてしまいます。

インストールの手順を説明します。

1.下記リンクから.jsファイルをダウンロードする。

.jsファイルをダウンロードする

2.ウェブページやブログのテンプレートのなるべく最後の方に下記HTMLを記述する(「{.jsファイルへのパス}」部分は適宜変更すること)。あるいは、この記事の続きにあるソースコードを直接ペーストする。

<script src="{.jsファイルへのパス}/oi_brbr_4.js" type="text/javascript"></script>

任意でclass属性によるフィルタリングも可能です。

1.ソースコードの「f:false,」を「f:true,」に変更する。
2.反応させたいaタグのclass属性値に「brbr」を追加する。
例えば、「<a href="〜" class="brbr">」。

TIPSなど。

・aタグのclass属性値に「brbr」と指定すれば、「.brbr span」でブルブルする際の1文字1文字にスタイルシートを適用できます。
・「brbr.main();」をwindow.onloadに設定するのもアリかと思います。

なお、既に過去の「ブルブル」をインストールしている場合は、古いスクリプトを削除してからインストールしてください。では、

がんばって!

<ソースコード>

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// ブルブル! (C) 20061123 oitake.jugem.jp
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
var brbr=
{
// ■class属性値に「brbr」を含むa要素のみ処理する
f:false,
// ■タイマーの間隔(ミリ秒)
t:25,
// ■文字の揺れる回数+1
n:16,
// ■文字の揺れる幅(em)
x:0.5,
// ■文字の揺れる高さ(em)
y:1.0
};
brbr.main=function()
{
brbr.x2=brbr.x/2;
brbr.y2=brbr.y/2;
brbr.s=[];
for(var i=0; i<brbr.n; i++)
{
brbr.s.push(Math.sin(Math.PI/2/brbr.n*i));
}
for(var i=0,l=document.links; i<l.length; i++)
{
if((!brbr.f || (brbr.f && l[i].className.match(/(?:^|¥s)brbr/i))) && !l[i].innerHTML.match(/[<>]/))
{
if(l[i].innerText)
{
l[i].$t=l[i].innerText;
}
else if(l[i].textContent)
{
l[i].$t=l[i].textContent;
}
else
{
l[i].$t=l[i].innerHTML;
}
l[i].$h=l[i].innerHTML;
l[i].$a=0;
l[i].onmouseout=function()
{
if(!this.$a)
{
this.$a=brbr.n;
}
if(!brbr.i)
{
brbr.i=setInterval('brbr.timer()',brbr.t);
}
}
}
}
};
brbr.timer=function()
{
for(var i=0,l=document.links,k=true; i<l.length; i++)
{
if(l[i].$a)
{
l[i].$a-=1;
if(l[i].$a)
{
k=false;
for(var j=0,h=''; j<l[i].$t.length; j++)
{
h+='<span style="position:relative;left:'+((Math.random()*brbr.x-brbr.x2)*brbr.s[l[i].$a])+'em;top:'+((Math.random()*brbr.y-brbr.y2)*brbr.s[l[i].$a])+'em;">'+l[i].$t.charAt(j)+'</span>';
}
l[i].innerHTML=h;
}
else
{
l[i].innerHTML=l[i].$h;
}
}
}
if(k)
{
clearInterval(brbr.i);
brbr.i=0;
}
};
brbr.main();

スポンサーサイト


2009.12.16 Wednesday | 21:55 | - | - | -

コメント

初めまして。
昨日ブルブル3を導入させて頂いたのですが、
たった今お邪魔したらブルブル4が公開されていて
早速バージョンアップしました。
きちんとブルブルできたのでご報告させていただきます。
prototype.jsと共生出来たり、任意でブルブルさせられるのようになったのがすごく嬉しいです。
只今はフルブルブルで稼動中です(^^)
私はJavaScriptとかPHPは初心者でイマイチよく分からないのですが、勉強の為にも今後もお邪魔させて下さい!

わらわ | 2006/11/24 1:14 AM
ありがとうございまーす。
ちなみに</body>真上のscript要素は不要ですよー。
oitake | 2006/11/24 1:25 AM
上記ご指摘のscript外しました。いりませんね(笑)
ブログのデザインが変わっていたので驚きました。
お洒落ですね!
それにしても、Image Waves 気持ち悪いです〜(泣)
わらわ | 2006/11/26 9:20 PM
> Image Waves 気持ち悪いです〜
ありがとうございます!
Image Wavesにとっては褒め言葉ですw
oitake | 2006/11/26 10:39 PM
はじめまして。
ブルブルを一目惚れしてしまいお借りしました。
オモシロいアイデアの詰まっていて、他にも試してみたいコトが満載です。
今後ともよろしくお願い致します。
Pavloba | 2006/12/05 9:05 PM
よろしくですー
どんどん持ってってー
oitake | 2006/12/06 1:18 AM
はじめましてShojiと言います。
nyaoさんにここの「ブルブル」のサイトを教えてもらいました。

さてダウンロードした「.js」ファイルをどの様に扱うのか
さっぱりわかりません。
この「ブルブル」を自分プログにも使いたいのですが。
勝手なことを書いてすいません。どうか教えて下さい。
shoji | 2006/12/11 9:56 PM
1.ダウンロードした.jsファイルを自分のブログにアップロードします。

2.アップロードした.jsファイルを、ブログのテンプレートで読み込むように設定します。↓こんな感じのタグを、テンプレートのなるべく最後の方に書きます。

  <script src="{.jsファイルへのパス}/oi_brbr_4.js" type="text/javascript"></script>

  もし1のアップロードができないようなら、

  <script src="http://oitake.web.fc2.com/js/oi_brbr_4.js" type="text/javascript"></script>

  でもいいんですが、あんまりやってほしくはないんです(直接リンクするのは禁止されてるから)。

テンプレをいじれない仕様のブログだと使えません。
ではでは。
oitake | 2006/12/12 12:15 AM
早速のご返事有り難うございます。

迷惑が掛からない方法で

頑張ってやってみます。
ちなみに僕のブログサイトは下記の所です。
http://shoikey.blog.shinobi.jp/
shoji | 2006/12/12 2:21 PM
はーい 使ってもらえるとうれしいです。
陰ながら応援してます|'з')
oitake | 2006/12/12 10:10 PM
今晩はOitakeさん。

Oitakeさんのコメントを参考に試行錯誤し

ようやく完成しました。有り難うございました。

僕の使っているブルブル3だと思うのでも目になれてきたら

バージョン4にも使ってみたいです。


shoji | 2006/12/13 8:41 PM
お ちゃんと動いてますねー
こちらこそありがとうございました!
oitake | 2006/12/13 11:24 PM
はじめまして!

どうしてか、うまく動きません・・・・
ちゃんと指定してるはずなんですが(涙)
テストで、oitake.web.fc2.com/js/oi_brbr_4.jsにリンクをはらせてもらっていますが、ダメです・・・

何がいけないんだろう。くやしい!
wataru | 2006/12/21 6:57 PM
書き忘れました。
いま作っているサイトは

http://barsazanami.com/

です。よろしくです・・・・
wataru | 2006/12/21 7:02 PM
解決しました!
初歩的なミスというか、外部jsの指定を<head>の中に入れていたのが問題でした。

<body>の中に入れたところ、ちゃんと動きました。
ありがとうございますー!!!
wataru | 2006/12/22 10:23 AM
外部jsの指定より上にあるリンクは無視されちゃいますので、</body>の直前が一番いいですね。
oitake | 2006/12/22 12:43 PM
ありがとうございます。先日、私の駄ブログに導入させていただきました。
ぷるぷる揺れて癒されます。
みーけ | 2009/05/04 12:45 AM
3年ぶりのコメント、ありがとうございます!
oitake | 2009/05/04 4:28 PM

トラックバック

またまたおもしろツールをご紹介! その名も『ブルブル! 』です。 このツールを使用したテキストにマウスカーソルをあわせて 外すと、文字がブルブル動きます! <script>タグが使用禁止なので、 ここで見せられないのが残念ですが、 是非試してみて
R26的できごと♪ | ブルブル | 2006/11/29 12:29 AM
非常に見づらくなってしまったようにも思うのですが?(笑) リンクを表示しているトコがガクガクブルブル震え出すってモノを拾ってきたりしました(・∀・;) oitake blog | ブルブル!(ブルブル 4) 「ブルブル!」は、マウスカーソルをテキストリンクから外す
果報は寝て待て(-_☆) | いいのか?コレで・・・( ̄∀ ̄;) | 2006/12/05 9:00 PM
文字をブルブルさせる...
heeha.ws::blog | ブルブルするリンクを導入 | 2007/02/02 1:18 PM
アンカーをマウスアウトさせると文字をブルブルさせるライブラリ。 ⇒ ブルブル!(ブルブル 4) ブルブル震えて可愛いんだか気持ち悪いんだか分かりませんが、こういうの凄い好きか...
error.log | ブルブル4。 | 2007/11/17 4:46 PM

アーカイブ

広告