文字を躍らせるスクリプト

スポンサーリンク


このボタンを押すと文字が躍ります

Let’s Dance!
レッツ ダンス!

ソースコード

このボタンを押すと文字が躍ります <input type="button" value="dance" onclick="var fonts=['sans-serif','serif','cursive','fantasy','monospace'];var cnt=fonts.length;var n=0;var elem=document.getElementById('dance1');if(elem){function sub(){elem.style.fontFamily=fonts[n];n=++n%cnt?n:0;};elem.style.fontFamily=fonts[n++];setInterval(sub,100);};"/>

<p id="dance1" style="color:#00f;font-size:3em">Let’s Dance!<br/>レッツ ダンス!</p>

スクリプトは、上のような動きです。
それでよければ、そのままブログに貼り付けて、青い文字を変えてお使いください。(<br /> は改行記号です)

ソースの説明

これと、2つ前のエントリー「一定時間でヘッダに美女画像!」は全く同じ考え方のプログラムです。onclick部分だけ、見やすく書き直します。

function changeFont(id,interval){
  var fonts=[
    'sans-serif',
    'serif',
    'cursive',
    'fantasy',
    'monospace'
  ]; //切り替わるフォントの名前(いくつでも可)

  var cnt=fonts.length; //フォントの数
  var n=0; //カウンター
  var elem=document.getElementById(id); //加工する文字のタグを取得
	
  if(elem){ //文字のタグが取得できたら(出来なければ何もしない)
    function sub(){       elem.style.fontFamily=fonts[n]; //フォントを変える       //カウンターがフォントの数と同じになったらゼロに       //それ以外は1つ増やす       n=++n%cnt?n:0;     };
    //一つ目のフォントをセット。カウンタープラス     elem.style.fontFamily=fonts[n++];     setInterval(sub,interval);//100ミリ秒ごとに上の色つきブロックを実行   } };

という内容です。重要なのはsetIntervalです。

setInterval(アクション, インターバル(ミリ秒))

質問、ご意見、ご指摘はコメント欄へお願いします。


関連コンテンツ

スポンサーリンク

「文字を躍らせるスクリプト」への7件のフィードバック

  1. こんばんは^^ 面白いこといっぱいできるのですね^^
    文字が 踊るの 目が落ちそうなくらい 驚きました@@(笑)

  2. おじゃましまーす。
    Renさんも、面白いこといっぱいやってくださいよー。
    大丈夫。うまくいかなかったらTomさんが
    サポートにいきますよ♪

    舞う雪とおよぐ雲。。すごくかわいかったです。

  3. こんにちは✩
    文字を躍らせる事が出来るなんて面白いですね♪
    ソースの中身が分からない私でも、コピペで貼り付けるだけなら
    簡単に真似出来ますね。 
    使わせて頂きます!(^O^)
    Tomさんのところはお役立ち情報が一杯で、ためになるし面白いです。

  4. WordPressとJUGEMのブログで試しましたが、
    失敗してしまいました。
    コピペするだけなのに、できない私って…(T_T)

    1. ファンブログから移転した記事なのですが、コピーする部分で、ダブルクオーテーションなどの表示がうまく出来ていませんでした。

      直したので、コピーするだけで動くと思います。

  5. Tomさん、どうもありがとうございます。
    JUGEMブログの記事にコピーしたら上手く表示されました。
    嬉しいです♪
    前に使っていたJUGEMブログはWordPressに移転して削除しましたが、
    テスト用に作ったのをまだ残しています。

    今度WordPressの方で、効果的な場面で使わせて頂きたいと思っています(^O^)

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください