サイトでオープニングでスライドショーを使いたい。

質問

こんにちは。

サイトのトップページで４，５枚の画像をスライドショーで表示させ、

スライドショーをフェードアウトで終了後に通常のトップ画面がフェードインして表示させることを、

FlashかjQueryで動作させるにはどうしたらいいのでしょうか？

トップページは遷移してページを表示させるのではなく同ページ内で実行させたいです。

参考にしたいwebサイトとしてこちらのhttp://www.boku-seka.com/

映画公式サイト「僕たちは世界を変えることが出来ない。」のように
出来ればなと考えています。

どうか詳しくご存知の方教えていただけないでしょうか。

よろしくお願いします。

回答No.4

神崎 渉瑠（@taloo）

拙作『だぶサラダ』http://dabsalad.wi-wi.jp/ で作ってみました。
http://pv.wi-wi.jp/okwave/q8292909/
スクリプトはHTMLコードをご覧ください。

"skip"のような仕組みは現段階では実装されていません。（今後実装するかどうかは現段階では未定です。）
そのため、skipされたように見せていますが、実際にはバックグラウンドでスライドショーが続けられています。（CSSのz-index指定により隠れているだけです。）

----------
スライドショーに必要なスクリプトは、
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script src="jquery.dabsalad.cw.js"></script>
この２行と、
その下のHTMLファイルに直に記述している<script>です。

-------------
$("#eyecatch").dabSalad(
{//グローバルオプション
loop:false,
onend: function(){ $('#menu').delay(2000).fadeIn(); } // スライドショー終了
},
[//使用画像
"images/photo1.jpg",
"images/white.png", "images/text1.png",
"images/white.png", "images/photo2.jpg",
"images/white.png", "images/text2.png",
"images/white.png", "images/photo3.jpg"
],
// 以降、動作定義（タイムライン、脚本）
{dressing:'image', duration: 1000, from:{width:'640px', height:'480px'}, to: {width:'640px', height:'480px'}}, // photo1
{dressing:'image', interval: 3000, group: true},//white
{dressing:'image', interval: 4000}, //text1
{dressing:'image', interval: 3000, group: true}, // white
{dressing:'image', interval: 4000}, // photo2
{dressing:'image', interval: 3000, group: true},//white
{dressing:'image', interval: 4000}, // text2
{dressing:'image', interval: 3000, group: true},//white
{dressing:'image', interval: 4000} // photo3
);
------------

第二引数で使用する画像を読み込み、
第三引数以降が、それぞれの動作を順番に定義しています（いわゆるタイムライン。個人的に"脚本（スクリプト）"と呼んでいます）。

だぶサラダにはフェードアウトする仕組みがありませんので、真っ白の画像（white.png）をフェードインさせる事で前の画像がフェードアウトしているように見せかけています。

すみませんがドキュメントが全くできておりません。（早くてもあと数日から１週間かかると思います。）
サポートは個別に行いますので、サイトトップから問い合わせページにいき、メールを送信してください。

お礼

ご回答ありがとうございます。

早速当サイトを拝見させてもらいました。
一度試してみようと思います。

回答No.3

ORUKA1951

flashで作ればよいです。
ただし、
「Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）・・・【中略】・・・Flash などの特殊な機能が使用されているために・・・【中略】・・・検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。( https://support.google.com/webmasters/answer/35769?hl=ja#2 )」
という致命的欠点。
ユーザーに最も嫌われる手法・・・少なくともスキップできる機能をつける。
flashは、将来的にはwebでは使われなくなる可能性が高い
　などの欠点を覚悟の上で・・

お礼

ご指摘ありがとうございます。
一度Flashで作ってみようと思います。

確かにflashは今後使われなくなりそうですね・・・
でも、プログラミング力がまだまだ足りない私には
今のところflashを使ったほうがよさそうです（゜´ω`゜）

回答No.2

web2525

ページ自体を全部Flashで作成すればいい
参考に上げているサイトもそうなっています

お礼

ご指摘ありがとうございます。

一度flashで作ってみようと思います。

回答No.1

k-josui

回答にはなりませんが・・・
そのようなサイトは、閲覧者から見るとイライラするだけです。
完全にサイトオーナーの自己満足です。
そのような閲覧者がいる事を踏まえた上で、それでも設置されたいのでしたら、実際の回答者さんの回答を参考にされてください。

お礼

個人的なご指摘ありがとうございます。

確かに人によっては不愉快なサイトとなるかもしれません。
しかし、それでも何か参考になることをご教授いただければ
ありがたい限りです。