li要素をクロスフェードするシンプルなjQueryプラグインをつくりました

li要素をクロスフェードするだけのシンプルなプラグインをつくりました。
画像とテキストが混じった状態でも順番にフェードイン・フェードアウトを繰り返します。

DEMOはこちら
ダウンロード

もともとプラグインではなくベタに書いてとある案件で使ったのですが、簡単なつくりのわりには思いのほか使い勝手がよさそうなのでプラグインにしました。

画像ではないテキストはWindowsXP以前の環境ではとても見出しやキービジュアルでは使うことなどできなかったのですが、最近の環境ではWindows環境でもそこそこきれいに見えます。そこで画像と文字をアニメーションさせるだけでもまぁまぁいけるんじゃ?と思ったのが作成したきっかけです。

HTMLはきわめてシンプルです。.slide_textというクラスがあるliはテキストです(クラス名はオプションで変更できます)。

javascript部分もcrossfade.jsを読み込み、ulに対してcrossfadeというメソッドを実行するだけです。オプションとしてテキストが入るliのクラス名、width,heightを指定します。

これでli要素の上から順番にクロスフェードを繰り返します。

プラグイン本体の中身は以下になります。setInterval内でクロスフェードの動きを指定しているので、数値を変えたりイージングを使ったりするともっと面白いかもしれません。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

kor さんより
はじめまして。jQuery超初心者ですが、こちらで紹介されている内容が、
やりたいことにとても近いため利用させていただきたいと思っています。
そこでお尋ねしたいことが2点あります。

・画像を画面の上下左右中央に配置するにはどうしたらよいでしょうか?
・フェードインアウトをループさせず、1回で止める(最後の画像もしくはテキストが表示されたまま)

どうぞご回答よろしくお願いいたします。
管理人 さんより
kor 様

コメントありがとうございます。

> ・画像を画面の上下左右中央に配置するにはどうしたらよいでしょうか?

このプラグインでやっていることはul#slider内部のliをクロフフェードしているだけですので、ul#sliderをdivで囲い、そのdivに対して上下左右中央のCSSを書けばどうでしょうか。
CSSの書き方はググるといろいろな事例が出てきます。たとえば以下の様な手法など。

http://css-happylife.com/archives/2007/0804_0000.php


> ・フェードインアウトをループさせず、1回で止める(最後の画像もしくはテキストが表示されたまま)

setInterval内のfunctionを見ていただきたいのですが、

i+1 >= $(obj).children('li').size()

というif内の判定文は最後かどうかを判定しています。このif内でclearIntervalを使ってsetIntervalの繰り返し処理を消せばいけるのではないでしょうか。
kor さんより
お返事ありがとうございます。
レイアウトに関しては色々な事例を参考にしてみたいと思います。

それからループさせない方法ですが、具体的にclearIntervalをどのように設定すればいいのかお教え頂けませんでしょうか。

どうぞ宜しくお願い致します。
管理人 さんより
kor 様

setInterval部分を以下のようにすれば最後の一枚がフェードインして停止します。
setIntervalやclearIntervalは応用するといろいろできる処理ですので、ご興味があれば調べてみるといいかもしれません。


//クリアするためにタイマーIDが必要
timerID = setInterval(function(){
                if(i+1 >= $(obj).children('li').size()){

//ここでclearInterval
clearInterval(timerID);

//以下の処理は1.最後の画像フェードアウト→2.最初の画像フェードインなので、繰り返したくないときはいらない
/*
                        $(obj).children('li:last').fadeOut(2000);
                        $(obj).children('li:first').delay(500).fadeIn(2000);
                        i = -1;
*/
                } else {
                
                        $(obj).children('li').eq(i).fadeOut(3000);
                        $(obj).children('li').eq(i+1).delay(500).fadeIn(2000);
                }
                i = i + 1;
        },5000);
kor さんより
ありがとうございました。
うまくいきました!!

もうひとつお尋ねしたいのですが、画像を画面中央に配置はできたのですが、
横幅を常に画面100%の設定にするにはどうしたらいいのでしょうか?

crossfadeを使わない状態での設定はできるのですが、組み込むと画像サイズそのままの表示にしかなりません(画面が小さい場合は画像が見切れる)
crossfadeを使う以上横幅100%の設定はできないのでしょうか?

本当に素人質問でもうしわけありません。
管理人 さんより
kor 様

このスクリプトでは画像を中央揃えにするためにliのbackgroundとして画像を配置しています。
なのでもしbackground-sizeが使える環境のみでよければ(つまりIE9以降)、liに対してbackground-size:cover;を設定することで常に幅100%で配置することが可能です。

CSSに

#slide li {
        background-size: cover;
}

と追記すればIE9以降であれば幅100%となります。

IE8以前の対応が必要な場合は・・・このスクリプトではちょっと無理ですね(;´∀`)