サイトのトップページが表示される前に画像を1枚スクリーンいっぱいに表示させたいと思います。

数秒表示後に、トップページに自動で切り替えたいのですが、どうしたらよろしいでしょうか?

画像はアクセス毎にランダムで表示し、トップページに切り替わるときは
フェードインで変えたいと思います。

参考のサイトは↓になりますが、2番目のヘッダーが表示されるのは
いりません。どうぞよろしくお願いします。
http://qusamura.com

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2013/05/10 18:11:19
  • 終了:2013/05/10 23:20:34

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4365ベストアンサー獲得回数18012013/05/10 19:15:44

ポイント100pt

書いてみました。jQuery を使ってます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var T_DISP = 1000;      // 画像を表示する時間 (ミリ秒)
var T_FADE_OUT = 2000;  // 画像をフェードアウトで消す時間 (ミリ秒)

/* 表示に使う画像の URL (複数) */
var images = [
    "http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20130211/20130211203309.jpg",
    "http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20121104/20121104140222.jpg",
    "http://cdn-ak.f.st-hatena.com/images/fotolife/a/a-kuma3/20130407/20130407123951.jpg"
    ];
$(function() {
    var img = images[ Math.floor(Math.random() * images.length) ];
    $("#cover").attr("src", img).delay(T_DISP).fadeOut(T_FADE_OUT);
});
</script>
<style>
#cover {
    position: absolute;
    top: 0;
    left: 0;
}
</style>

<!-- トップページに被さって表示される画像用のエリア -->
<img id="cover">

<!-- トップページの内容をつらつらと... -->
<div>
<h1>トップページ。</h1>
こんなことや<br>
あんなこと
</div>

トップページが表示されてから、1秒画像を表示して、その後、2秒かけて画像がフェードアウトします。
画像は、ぼくのフォトライフから適当に三つ選んでますが、いくつでも設定できます。


動いてるものを見た方が、感じが分かりやすいと思うので、jsFiddle に置いてみました。
http://jsfiddle.net/a_kuma3/6C6Q3/embedded/result/

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません