人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

サイトのトップページが表示される前に画像を1枚スクリーンいっぱいに表示させたいと思います。
数秒表示後に、トップページに自動で切り替えたいのですが、どうしたらよろしいでしょうか?

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

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


●質問者: izumi6878
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

書いてみました。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/

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ