背景がスクロールに合わせて少しづつ動く ワンランクアップのパララックス

背景がスクロールに合わせて少しづつ動く ワンランクアップのパララックス
このエントリーをはてなブックマークに追加
PR

CSSで背景を固定した要素とそうではない要素を組み合わせてパララックスにすることがあります

その場合は background-attachment の fixed か scroll かの違いをうまく使い分けて行います

 

その固定した背景が、スクロールによって少しづつ移動していく感じに

jQueryを使って表現したテクニックです

 

 

Fixed header and parallax scrolling BG with ◇ indicator

DEMO 表示

 

まず、 html と body にheight 100% を指定することで

div要素で 高さのパーセントでの指定ができるようになります

100% でブラウザでの表示領域の高さと同じ高さになるようになる

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

 

 

今回のテクニックでは、CSSのみで行うパララックス効果の作り方と違って

background-attachment の fiexd を使わないです

そのかわりに position fixed で画面に画面を覆うように固定させる (例では90%の領域)

その固定させた div に背景を指定する

#header {
  background: url(http://i.imgur.com/ZmrjWRm.jpg) no-repeat center top;
  background-size: cover;
  position: fixed;
  height: 90%;
  bottom: 10%;
  right: 0;
  left: 0;
  top: 0;
}

 

 

あとは、固定した背景のある div を、次の要素より下に来るようにしておくことで

下の要素がスクロールした時にせり上がってきたようになる

 

 

そして、固定した div に jQuery の ScrollTop を使って現在のスクロールに合わせて

固定した div の背景を background-position-y でスクロール量に合わせてずらすようにしてある

今回の例では、スクロールの量の1/20の変化にしてある

$(document).scroll(function() {
  $("#header").css({
    "background-position-y": (-$(this).scrollTop()/20)
  })
});

 

 

 

コード全体

HTML

<div id="header">
  <div class="center">
    <div class="middle">
      <h1>Sky</h1>
      <span>Fixed header and parallax scrolling background with a rhombus indicator</span>
    </div>
  </div>
</div>

<div id="pageHr"> 
  <i><i>↓</i></i>
</div>

<div id="page"></div>

 

CSS

@import url(http://fonts.googleapis.com/css?family=Varela+Round);
@import url(http://fonts.googleapis.com/css?family=Lusitana);
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Varela Round";
  background: #444444;
}

#header {
  background: url(http://i.imgur.com/ZmrjWRm.jpg) no-repeat center top;
  background-size: cover;
  position: fixed;
  height: 90%;
  bottom: 10%;
  right: 0;
  left: 0;
  top: 0;
}
#header .center {
  background: rgba(0, 0, 0, 0.25);
  text-align: center;
  position: absolute;
  color: #FFFFFF;
  color: #F5F7FA;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
#header .center .middle {
  position: absolute;
  margin-top: -8em;
  right: 0;
  left: 0;
  top: 50%;
}
#header .center .middle h1 {
  font-family: "Lusitana";
  font-weight: normal;
  line-height: 1em;
  font-size: 11em;
  margin: 0;
}
#header .center .middle span {
  line-height: 5em;
  font-size: 1em;
}

#pageHr {
  background: #FFFFFF;
  position: relative;
  height: 5px;
  display: block;
  right: 0px;
  left: 0px;
  top: 90%;
  z-index: 1;
}
#pageHr > i {
  margin: -25px;
  border: 5px solid #FFFFFF;
  height: 40px;
  width: 40px;
  background: #48CFAD;
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#pageHr > i > i {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  line-height: 36.8px;
  font-size: 20px;
  height: 40px;
  width: 40px;
  text-align: center;
  position: absolute;
  color: #FFFFFF;
  display: block;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#page {
  background: #37BC9B;
  position: relative;
  height: 123.45%;
  top: 90%;
}

 

jQuery

$(document).scroll(function() {
  $("#header").css({
    "background-position-y": (-$(this).scrollTop()/20)
  })
});

 

 

 

コードをファイルでダウンロード

DOWNLOAD
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)