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

皆さまごきげんよう。
よく、駅なんかで右から左へ情報が流れてくる電光掲示板てあるじゃないですか。最近のwebではめっきり見かけなくなりましたが、そんな今コレを取り入れたら逆に新しいんじゃないの?!ということで、(笑) 本日はjQueryで電光掲示板のようなもの(ティッカー)を作ってみようと思います。

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

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

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>タグを入れましょう。その下にもう一つ<script>タグを作ってその中にjQueryを書いていきます。

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>//お約束
<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行目)
setTimeout(関数名,その関数を実行するまでに待機する時間ミリ秒);という風に書きます。
今回は、関数「classFunc」を10000ミリ秒(10秒 → cssのアニメーションで設定した時間)待機して実行するよ、という風に指定しています。このタイマーまで含めたここまでの動きが関数「classFunc」です。
それを、関数の } が閉じた後で呼び出しているため(jQuery13行目)、延々と同じことが繰り返されるというわけなんです。
ここでのポイントはcssのアニメーション設定の時間とjQueryのsetTimeoutでのタイマー設定時間は同じにします。違うとタイミングがずれてしまいます。

4.まとめ

完成〜*\(^o^)/*クリックしてね☆
今回はティッカーを作りましたので、アニメーションを右から左に流すように設定しましたが、設定を変えて下から上に上がってくるようにしてみたり、opacityを変えてふわっと現れるようにしてみたり…と、css次第で色々と応用が出来そうです。ぜひ皆さんも試してみてくださいね!

おまけ(^^)

先日花見に行ってまいりました、立川市の国営昭和記念公園の桜です♪
skk01
ディズニーランドの3倍の広さ!という広大な園内には、約1500本もの桜があるとのこと!特に「桜の園」は上を向いても空が見えないくらいの満開の桜でした♪桜以外にも季節の花々がいっぱい咲いており、おすすめのスポットですよ〜。桜もまだギリギリ間に合うと思いますので、ぜひ皆さんも足を運んでみてくださいね!

それにしても、い、一眼レフ欲すぃ…(T^T)
てことで、次回は ”一眼レフが無くてもOK!Photoshopで写真加工の巻” でもやってみようかな(笑)

コメントを残す