最近いろんなwebサイトをチェックしていると、メインビジュアルが横にゆっくり自動で流れているものを
見かけることがあります。

気になったので、実際に試してみました。

DEMO

実装は難しくありません！

背景画像を1pxずつずらしていくといった感じになっております。

javascript

JavaScript

$(function(){ setInterval("bgslide()", 50); }); var current = 0; function bgslide(){ current -= 1; $('.head_wrap').css("background-position", current+"px 50px"); }

1 2 3 4 5 6 7 8 9 10

$(function(){ setInterval("bgslide()", 50); });   var current = 0;   function bgslide(){ current -= 1; $('.head_wrap').css("background-position", current+"px 50px"); }

時間を早くしたり、遅くしたりしてもいいと思います。
また、今回ヘッダーのメニューがあるので、背景画像を上から50pxの位置に設定してますが、
実際は0とになるのではないかと思います。

html

XHTML

<div class="head_wrap"> <header id="header"> <div class="head_cont clearfix"> <h1><a href="">logo</a></h1> <nav id="nav"> <ul class="gnavi"> <li class="navi01"><a href="#">Home</a></li> <li class="navi02"><a href="#">About us</a></li> <li class="navi03"><a href="#">Service</a></li> <li class="navi04"><a href="#">Work</a></li> <li class="navi05"><a href="#">Recruit</a></li> <li class="navi06"><a href="#">Blog</a></li> </ul> </nav> </div> </header> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div class="head_wrap"> <header id="header">      <div class="head_cont clearfix">         <h1><a href="">logo</a></h1>         <nav id="nav">          <ul class="gnavi">              <li class="navi01"><a href="#">Home</a></li>                 <li class="navi02"><a href="#">About us</a></li>                 <li class="navi03"><a href="#">Service</a></li>                 <li class="navi04"><a href="#">Work</a></li>                 <li class="navi05"><a href="#">Recruit</a></li>                 <li class="navi06"><a href="#">Blog</a></li>             </ul>         </nav>         </div>     </header> </div>

css

cssは該当箇所だけ載せます。

CSS

.head_wrap{ background: url(../main.jpg) repeat-x 0 50px; padding-bottom: 250px; }

1 2 3 4

.head_wrap{ background: url(../main.jpg) repeat-x 0 50px; padding-bottom: 250px; }

背景の画像をシームレスにすると、継ぎ目がなくてもっといい感じになると思います。

いろんな写真を載せたい場合はどうすればいいか、
ということもあると思います。

それはまた次回にやりたいと思います！