最近いろんなwebサイトをチェックしていると、メインビジュアルが横にゆっくり自動で流れているものを
見かけることがあります。
気になったので、実際に試してみました。
実装は難しくありません！
背景画像を1pxずつずらしていくといった感じになっております。
javascript
|
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
|
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は該当箇所だけ載せます。
|
1 2 3 4 | .head_wrap{ background: url(../main.jpg) repeat-x 0 50px; padding-bottom: 250px; } |
背景の画像をシームレスにすると、継ぎ目がなくてもっといい感じになると思います。
いろんな写真を載せたい場合はどうすればいいか、
ということもあると思います。
それはまた次回にやりたいと思います！
