jQueryでティッカーを作ってみよう

2022.1.23 更新

皆さまごきげんよう。

よく、駅などで右から左へ情報が流れてくる電光掲示板がありますよね。

ひと昔前のwebではよく見かけたアレを、今取り入れたら逆に新しいんじゃないの?ということで、 本日はjQueryで電光掲示板(ティッカー)を作ってみようと思います。

流す文章が一つのみなら css3 のアニメーションでも良いのですが、文章がいくつかあり、その文章が増えたり減ったりする場合、jQueryでプログラムを書いておくと便利なのです。

それでは早速やってみましょう。

目次

  1. css3でアニメーションの設定をする
  2. jQueryで関数を作る
  3. setTimeout関数でタイマーをセットする

1.css3でアニメーションの設定をする

まず、bodyの中にulとliがいくつか入っただけの簡単なhtmlファイルを作成します。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ticker</title>

</head>
 <body>
   <ul>
     <li>居候三杯目にはそっと出し</li>
     <li>人間万事塞翁が馬</li>
     <li>馬も買わずに鞍を買う</li>
     <li>実るほど頭を垂れる稲穂かな</li>
   </ul>

 </body>
</html>

<head>タグ内に<style>タグを作り、cssを書きます。

ここでのポイントは、後にjQueryでaddClass(クラスを付加)する、アニメーションの設定です。

下記のcss24行目から31行目までの部分です。

@keyframesでanime1という名前をつけたアニメーションを、jQueryで <li>にanime-yokoというクラスがaddClassされると、10秒かけて行われるようになっています。

<style type="text/css">
   html,body{
     margin: 0;
     background: url("https://dl.dropboxusercontent.com/ticker00.jpg") no-repeat;
     background-size:cover;
     color:#FF5A36;
     font-size: 1.5em;
     overflow: hidden;/*横スクロールを出さない*/
   }
   ul{
     height:2em;
     width:60em;
     margin-top: 3em;
     background:#111;
     position: relative;
     overflow :hidden;
   }
   li{
     position: absolute;
     list-style : none;
     display:none;
     padding: 0.5em;
   }
   .anime-yoko{
     animation: anime1 10s linear infinite both;
     display: inline-block;
   }
   @keyframes anime1 {
     0% {left:120%;}/*アニメの開始時は画面から見えない位置にある*/
     100% {left:-30%;}/*画面右から出てきてアニメ終了後に左画面上から消える*/
   }
  </style>

2.jQueryで関数を作る

</body>の閉じタグの上に、jQueryを使う時にはお約束のjQueryを読み込む<script>タグを入れましょう(1行目)。その下にもう一つ<script>タグ(2行目~)を作ってその中にjQueryを書いていきます。

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>//jQueryを読み込むお約束
<script>
   $(function(){
      var liNum = $('li').length;//liの数を取得
      var i = 1;//iの初期値
      function classFunc(){
       $('li').removeClass('anime-yoko');//最初に全てのliからremoveClassしておく
       $('li:nth-child('+i+')').addClass('anime-yoko');//i番目のliにaddClassする
       i++;//iをインクリメント(iの数を一つずつ増やす)
       if (i > liNum){i = 1;}//もしiがliの数より大きくなったらiを1にする
       setTimeout(classFunc,10000);//10秒後にfunctionを予約
     }
       classFunc();//関数を呼び出す
    });
</script>

最初に変数を定義し(jQuery4〜5行目)、「classFunc」という関数を作りました。

説明はコメントアウトの通りですが、ポイントは、

●liがいくつ増えてもいいようにlengthでliの数を取得し、「liNum」という変数にしている

「○番目のli」の表現を、変数 i とcssの疑似クラスnth-child(n)を使って、nth-child(‘+i+’)としている

3.setTimeout関数でタイマーをセットする

前回もちょっと触れた、setTimeout関数がここでも出て来ました(jQuery11行目)。

jQueryで座標を取得してみよう

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>//jQueryを読み込むお約束
<script>
   $(function(){
      var liNum = $('li').length;//liの数を取得
      var i = 1;//iの初期値
      function classFunc(){
       $('li').removeClass('anime-yoko');//最初に全てのliからremoveClassしておく
       $('li:nth-child('+i+')').addClass('anime-yoko');//i番目のliにaddClassする
       i++;//iをインクリメント(iの数を一つずつ増やす)
       if (i > liNum){i = 1;}//もしiがliの数より大きくなったらiを1にする
       setTimeout(classFunc,10000);//10秒後にfunctionを予約
     }
       classFunc();//関数を呼び出す
    });
</script>

setTimeout ( 関数名,その関数を実行するまでに待機する時間ミリ秒 ); という風に書きます。

今回は、関数「classFunc」を10000ミリ秒(10秒 → cssのアニメーションで設定した時間)待機して実行するよ、という風に指定しています。

このタイマーまで含めたここまでの動きが関数「classFunc」です。

それを、関数の } が閉じた後で呼び出しているため(jQuery13行目)、延々と同じことが繰り返されるというわけです。

ここでのポイントは

cssのアニメーション設定の時間とjQueryのsetTimeoutでのタイマー設定時間は同じにします。違うとタイミングがずれてしまいます。

完成です☆(うまく表示されない場合は一度リロードしてみてください)

今回はティッカーを作りましたので、アニメーションを右から左に流すように設定しましたが、設定を変えて上から下に落ちてくるようにしてみたり、opacityを変えてふわっと現れるようにしてみたり…と、css次第で色々と応用が出来そうです。

ぜひ皆さんもお試しください♪

コメントを残す