1. HOME
  2. ブログ
  3. 背景に動画を入れて遊んでみる

背景に動画を入れて遊んでみる

背景に動画がはいっているのはエラーではありません(汗)

また、遊びなので、IEは無視しています(笑)

 

ホームページの演出方法は、どんどん発展してきていますね。

 

パララックス効果を使ったサイト

例えば、スクロールをすることで、背景がユニークに動く「パララックスサイト」

パララックス効果とは、視差のことで、手前と奥のものがずれて動くことによって奥行きを感じる効果・・・らしい

 

Lookout

スクリーンショット 2014-02-28 5.19.57
https://www.lookout.com

 

docomo Photo Collection

スクリーンショット 2014-02-28 5.21.14
http://photo-collection.nttdocomo.co.jp/pc/

 

TOTALITE

スクリーンショット 2014-02-28 5.26.33
http://la-totalite.jp

 

普通のホームページよりも、演出効果が高まっています。

なんだか、ドラマチックな感じがしますね。

 

 

背景を全面画像にしたサイト

背景を全面画像にするサイトも流行しました。

これも、使い方によってはインパクトがありますね。

 

LIGさんのスライドショーデモサイト

スクリーンショット 2014-02-28 5.32.45
http://211.125.65.24/demo/2012/08/SublimeSlideshow/

 

背景に動画を使ったサイト

今後、ますます注目されると言われているのが、背景に動画を使ったサイトです。

 

theQ camera

水中でも使えるカメラの紹介サイト。
背景に、水中でカメラを使っている動画が大きく流れます。

スクリーンショット 2014-02-28 5.35.06
http://www.theqcamera.com

 

 

今回は、この手法をホームページでも使えないかなぁーと、色々と遊んでみました。

参考にしたのは、こちらの手法です。
ありがとうございます!

HTML5で背景全面に動画を流してインパクトのあるページを作る

 

動画を用意する

今回は、タントラヒーリングサロン Sacred Temple様 で流している映像を一部拝借しました。

スクリーンショット 2014-02-28 6.26.05
今村様 ありがとうございます!

合計で3MBほどの画像に加工しました。

 

動画を貼付けるタグを用意する

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);
});

 

 

まとめ

ということで、これらを実装すると、すぐにこんな感じの背景動画を作ることができます。

弊社が納品しているサイトなら、問題なく実装できると思います☆
※もちろん、その時はレイアウトなどは整えて

 

演出効果は「難しそう」と思う部分もあると思いますが、
比較的簡単なコードで、すぐに実装できるものもあります。

何事もチャレンジ。

 

時代について行く必要はないけれど、
時代を楽しむことって、大事かなと思ったりしています。

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る

mautic is open source marketing automation