2022.1.23 更新
皆さまごきげんよう。
よく、駅などで右から左へ情報が流れてくる電光掲示板がありますよね。
ひと昔前のwebではよく見かけたアレを、今取り入れたら逆に新しいんじゃないの?ということで、 本日は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>タグを入れましょう(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行目)。
<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次第で色々と応用が出来そうです。
ぜひ皆さんもお試しください♪