ページを開いた時に画像をフェードイン・フェードアウトするプラグイン
以前、書いたjQueryを使って まず画像を表示させてから、コンテンツを表示させるフェードエフェクトを実装する記事を書いたのですが、コメントの方で複数画像の場合についてコメントを頂いて。
複数画像でも、簡単に出来るようにプラグインをちょっと作ってみたくなって、今回作って見たのを紹介したいと思います、すべてのコメントに対して応えることが出来るわけではないのですが、コメントの方で興味をそそられるものがあれば、やっていこうかと思ってます。
更新履歴
- 初回のみ表示の機能を追加しました
jQueryを使って、ページを開いた時に複数画像を順にフェードインとフェードアウトをしてからコンテンツを表示するプラグインを作ってみた
とりあえず、DEMOを御覧ください
どういったことを行っているかと言うと、以前書いた記事の応用でjQueryのfadeIn、fadeOutを使ってアニメーションを実装しています。コンテンツをすべて非表示にして、順番に画像をフェードイン・フェードアウトさせているだけなのですが。
HTMLのソースはこのようになっています
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="fade.js"></script>
<style>
#fade-image div {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: center center no-repeat;
background-size: cover;
display: none;
z-index: 9999;
}
</style>
<script>
deley_time = 1500; //フェードアニメーションのスピード 1000 = 1秒
image_list = [
"00001.jpg",
"00002.jpg",
"00003.jpg",
]//画像のリスト
</script>
</head>
<body>
<h1>コンテンツ</h1>
</body>
</html>
jQueryを読み込んだ後に、今回作ってみたフェード実装プラグイン、fade.jsを読み込んで少しのCSSとscriptを記入するだけで使えるようにしました。
プラグインの使い方
headタグ内に以下を貼り付けます
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="fade.js"></script>
<style>
#fade-image div {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: center center no-repeat;
background-size: cover;
display: none;
z-index: 9999;
}
</style>
<script>
deley_time = 1500; //フェードアニメーションのスピード 1000 = 1秒
image_list = [
"00001.jpg",
"00002.jpg",
"00003.jpg",
]//画像のリスト
</script>
jQueryはCDNで読み込まれていますが、今回作成したfade.jsが必要です以下よりダウンロードしてください
DOWNLOADあとはfade.jsを任意の場所に設置して、それに合ったパスで指定してください。
画像の指定とフェードの速度の指定
<script>
deley_time = 1500; //フェードアニメーションのスピード 1000 = 1秒
image_list = [
"00001.jpg",
"00002.jpg",
"00003.jpg",
]//画像のリスト
</script>
次に画像の指定ですが、上のコードを参考に00001.jpgのところを画像へのURLや相対パスを指定します、個数は好きな分だけ同じように行を増やしてください
そしてフェードの速度ですが、 deley_time の数字のところで速度を決めれます 1000 = 1秒となっています。
オプション
firstview = "on"; //初回のみ表示する場合は on 毎回表示する場合は省略可
オプションの指定の仕方
<script>
firstview = "on"; //初回のみ表示する場合は on 毎回表示する場合は省略可
deley_time = 1500; //フェードアニメーションのスピード 1000 = 1秒
image_list = [
"00001.jpg",
"00002.jpg",
"00003.jpg",
]//画像のリスト
</script>
オプションは 設定のscriptタグ内に記入すればOKです、前の方でも後ろの方でもどちらでもOK
使い方は簡単 3 Step
- Step 1 ： headにコードを貼り付け
- Step 2 ： fade.jsを設置（必要な場合はheadに書いたコードのパスの変更）
- Step 3 ： 画像の指定とフェードの時間の設定
- オプションをお好みで設定
- おわり
DEMOのファイル一式も置いて起きますので、好きに使ってください
DOWNLOAD
ナナコ
はじめまして。
jQueryの事を調べていて、この記事を拝見いたしました。
トップページに戻る度に、一回目と同じように画像が3枚表示されてコンテンツが表示されますが、
２回目以降は、画像を表示させずにコンテンツが表示をさせるには、クッキーを使うjQueryが必要でしょうか？
お作りしている「fade.js」との連動は簡単でしょうか・・・
質問ばかりですみません・・・＞＜
管理人
ナナコさん
初回か、それ以外なのか等は
ブラウザにcookieやlocalstorageを使って記憶させるしかないですね
fade.js の中身を if文で記録した情報を元に条件分岐してやれば大丈夫ですよ
あと、プラグインの方は
初回表示に対応させてみました
K.H
はじめまして。
jQueryの記事を拝見いたしました。
jQueryは全くの初心者です。
ホームページ開いた時に画像は表示はされるのですが、画像が表示される前にコンテンツあたる部分がチラ見せ状態で表示されます。
どうしたらこれを解決できるのでしょうか？
YO
はじめまして。
サイト制作中にgifアニメを使ったオープニングムービーを再生後にトップページページを表示したくてこちらを拝見しました。
こちらに書いていた方法で思った通りの表示ができて大変喜んでおります。
ただ一転問題がありましてwordpressテーマsydneyをカスタマイズして制作しているのですがメニュー内にあるドロップダウンメニューがクリックで開くのですがすぐに閉まるようにってしまい困っています、、、
slideToggleを使っているようなのですがなにか原因になるようなことはわかりますでしょうか、、、、
よろしくお願いします。