1ページ内で背景を静止画と動画に切り替える方法

Question

少し言葉で表すのが難しいのですが、
1ページに画面の高さ3倍分程度のコンテンツがあります。一番上部にはサイトのロゴ（画像）を大きくページの中心に表示し、
下にスクロール(画面の高さ分)した場合に背景を動画に切り替えたいと思います。

この方法が分からなく質問させていただきました。
うまい方法(ロジック)などをご存知の方がいましたらアイデアをいただけないでしょうか？

動画はmp4で現在はvideoタグをうまく利用して切り替えできないかと考えています。

Answer 1

以下のようにposition:fixedとabsoluteで動画と背景画像でレイヤーのように重ねてbg_topのみ高さをjavascriptで指定してみました。 私自身もjavascriptが得意でないので他のブラウザで問題なければこれで行きたいと思います。

#bg_top {
	position: absolute;
	right:0;
	top:0;
	min-width:100%;
	width:auto;
	background-image: url(bg.jpg);
	background-color: #ffffff;
	background-position: center center;
	background-repeat: no-repeat;
	z-index:0;
}

/*背景固定動画*/
#bg_video {
	position:fixed;
	right:0;
	bottom:0;
	min-width:100%;
	min-height:100%;
	width:auto;
	height:auto;
	z-index:-1;
}

Answer 2

文面から汲み取った感じでは、ファーストビュー分をスクロールしきったら、背景が動画に切り替わると言う感じでしょうか。

JavaScriptで現在位置(スクロール量)を取得する

上記のエントリーのように、スクロール量を測るスクリプトがあるので「一定のスクロール量に達した場合、背景を動画要素に切り替える」と言うようなJSの組み方で作れそうな気がします。

※当方プログラマではないので、アイディア出しのみです

Comments

[minaduki]

アイディアをありがとうございます。
この方法を少し考えてみましたが今回は動画と画像の背景レイヤーで画像のみ高さ指定という方法を試してみたいと思います。