jQueryで手軽にサクッとシンプルなニュースティッカーを作る

今更なTipsなんですけど、まぁ自分用の
復習的な記事です。カスタマイズしやす
いニュースティッカーを作るコードで、
1行でも4行でも画像でも、cssで見た目
をスタイルするだけで少量のコードで
実装する事が出来ます。

いろいろプラグインを紹介しておいてアレですけど、実際プラグインに依存すると困ることのほうが多いので簡単なものは簡単なコードで実装出来る程度にはしておきたい所ですね。

Sample:01

ティッカーです。実際こんな風には実装せず、目立たないところに配置しますけど・・

以下のコードで実装します。

function ticker(){
        
        $('#news li:first').slideUp( function(){
            $(this).appendTo($('#news')).slideDown(); 
        });
    }
    setInterval(function(){ticker()}, 5000);

.appendTo()を使ってリストが何度も繰り返しスライドアップするようなティッカーを作成します。
setInterval()っていうのは一定時間指定した要素を繰り返し呼び出す関数ですね。5000はその時間指定です。

Sample:02 / 見た目を変える

cssを変えるだけで、ちょっと違った見せ方が出来ます。

ティッカーというより、カルーセルみたいなコンテンツになりましたが、Sample:01との変更点はcssのみです。

cssの変更点ですが、先程はulの高さを60pxとしていましたが、210pxに変更しただけ。あと、borderつけました。

今度は背景やWebフォントを変えました。

コードで頑張らなくてもcssの変更だけで違った印象のコンテンツを実装できますね。

jQueryでWebデザインをリッチに、便利に、華やかに、みたいな記事もたまに見かけますけど、基本的に見た目に関してはcssの工夫によるものが大半です。

jQueryは便利ですが、jQueryならWebデザインの幅が広がる、と言い切れるものではありません。これを勘違いすると技術に振り回された身勝手なWebデザインになってしまいますよ。このブログのように:P

目的の無いデザインは装飾でしかありません。もちろん、装飾を悪とは言いませんが、使い方には気を使うべきかもしれませんね。

Sample:03 / エフェクトを変える

アニメーションするスライドがウザいです、という方はフェードインアウトエフェクトでトライしてみてください。人によっては目に優しいと感じるかも。

.slideDown()などを.fadeIn()やOutに変えただけです。

蛇足ですけどcssメソッドで要素を透過させてもほぼ同じエフェクトを実現できます。

それはそうと微妙なエフェクトですねｗただのサンプルなのでお察し頂ければ。

Bad Sample / 要素が1つしか無い場合はどうなる？

でも、いままでのコードですと、仮に要素が1つでも以下のようにエフェクトを繰り返してしまいます。

見苦しいですねー。この手のスクリプトはRSSなどを読み込んでli要素で表示させるケースもあります。この場合、読み込んだ要素が1つしかない、という可能性もあることを考えます。

Sample:04 / if文で解決する

なので、要素が1つの場合は動かさないようにしてあげます。

Sample:01に以下のコードを追加しています。

if($('#news li').length<=1) return false;

要素が1つの場合は動かさない、という命令文です。これで、要素が1つの場合はアニメーションさせず、2個以上ある場合は先程のスライドするコードを実行するスクリプトが出来上がりました。

ちなみに同じような記事を5509で2年前に書かれていますので、jQueryを勉強するのでしたらこちらのブログをぜひご覧になってみてください。

以上、手軽に作れるティッカーの基本チュートリアルでした。尚、スクリプトは以下で勉強しました。
via:workshop