背景に動画がはいっているのはエラーではありません（汗）
また、遊びなので、IEは無視しています（笑）
ホームページの演出方法は、どんどん発展してきていますね。
パララックス効果を使ったサイト
例えば、スクロールをすることで、背景がユニークに動く「パララックスサイト」
パララックス効果とは、視差のことで、手前と奥のものがずれて動くことによって奥行きを感じる効果・・・らしい
Lookout
docomo Photo Collection
http://photo-collection.nttdocomo.co.jp/pc/
TOTALITE
普通のホームページよりも、演出効果が高まっています。
なんだか、ドラマチックな感じがしますね。
背景を全面画像にしたサイト
背景を全面画像にするサイトも流行しました。
これも、使い方によってはインパクトがありますね。
LIGさんのスライドショーデモサイト
http://211.125.65.24/demo/2012/08/SublimeSlideshow/
背景に動画を使ったサイト
今後、ますます注目されると言われているのが、背景に動画を使ったサイトです。
theQ camera
水中でも使えるカメラの紹介サイト。
背景に、水中でカメラを使っている動画が大きく流れます。
今回は、この手法をホームページでも使えないかなぁーと、色々と遊んでみました。
参考にしたのは、こちらの手法です。
ありがとうございます！
HTML5で背景全面に動画を流してインパクトのあるページを作る
動画を用意する
今回は、タントラヒーリングサロン Sacred Temple様 で流している映像を一部拝借しました。
今村様 ありがとうございます！
合計で３MBほどの画像に加工しました。
動画を貼付けるタグを用意する
HTML5を使って、映像を流し込むためのソースコードを書きます
CSSを用意する
デザインを整えるための設定を書きます
div#dotpattern{
width:100%;
height:100%;
background-image:url(hogehoge/images/dot.gif);
position:fixed;
top:0;
left:0;
z-index:2;
}
video#sample-video{
position:fixed;
top:0;
left:0;
z-index:1;
}
スクリプトを設定する
映像をウインドウサイズに合わせるために、スクリプトを書きます。
$(function(){
var w = screen.width * 1.05;
$("video#sample-video").attr("width", w);
});
まとめ
ということで、これらを実装すると、すぐにこんな感じの背景動画を作ることができます。
弊社が納品しているサイトなら、問題なく実装できると思います☆
※もちろん、その時はレイアウトなどは整えて
演出効果は「難しそう」と思う部分もあると思いますが、
比較的簡単なコードで、すぐに実装できるものもあります。
何事もチャレンジ。
時代について行く必要はないけれど、
時代を楽しむことって、大事かなと思ったりしています。
