freyjajQueryでティッカーを作ってみよう皆さまごきげんよう。駅なんかで右から左へ情報が流れてくる電光掲示板てあるじゃないですか。本日はjQueryで電光掲示板のようなもの(ティッカー)を作ってみようと思います。なにもわざわざjQuery使わなくてもcss3のアニメーションでいいんでない?とも言えますが、流す文章が一つのみならそれで良いのですが、リストになった文章がいくつかあり、それが増えたり減ったりする場合、jQueryでプログラムを書いておくと便利です。それでは早速やってみましょう。1.css3でアニメーションの設定まず、bodyの中にulとliがいくつか入っただけの簡単なhtmlファイルを作成します。</body></html><head>タグ内に<style>タグを作り、cssを書きます。ここでのポイントは、後にjQueryでaddClass(クラスを付加)する、アニメーションの設定です。下記のcss24行目から31行目までの部分です。<li>にanime-yokoというクラスがaddClassされると10秒かけて行われるようになっています。</style>2.jQueryで関数を作る</body>の閉じタグの上に、jQueryを使う時にはお約束のjQueryを読み込む<script>タグを入れましょう。その下にもう一つ<script>タグを作ってその中にjQueryを書いていきます。});</script>最初に変数を定義し(jQuery4〜5行目)、「classFunc」という関数を作りました。●liがいくつ増えてもいいようにlengthでliの数を取得し、「liNum」という変数にしています。cssの疑似クラスnth-child(n)を使って、nth-child(‘+i+’)としています。3.setTimeout関数でタイマーをセット前回もチョロっと触れた、setTimeout関数がここでも出て来ました。(jQuery11行目)setTimeout(関数名,その関数を実行するまでに待機する時間ミリ秒);という風に書きます。cssのアニメーションで設定した時間)待機して実行するよ、という風に指定しています。このタイマーまで含めたここまでの動きが関数「classFunc」です。閉じた後で呼び出しているため(jQuery13行目)、延々と同じことが繰り返されるというわけなんです。ここでのポイントはcssのアニメーション設定の時間とjQueryのsetTimeoutでのタイマー設定時間は同じにします。違うとタイミングがずれてしまいます。今回はティッカーを作りましたので、アニメーションを右から左に流すように設定しましたが、設定を変えて下から上に上がってくるようにしてみたり、opacityを変えてふわっと現れるようにしてみたり...と、css次第で色々と応用が出来そうです。皆さんも試してみてくださいね!おまけ(^^)先日花見に行ってまいりました、立川市の国営昭和記念公園の桜です♪ディズニーランドの3倍の広さ!という広大な園内には、約1500本もの桜があるとのこと!特に「桜の園」は上を向いても空が見えないくらいの満開の桜でした♪桜以外にも季節の花々がいっぱい咲いており、おすすめのスポットですよ〜。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。%d人のブロガーが「いいね」をつけました。