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

Tweet

237

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

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

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

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

Fixed header and parallax scrolling BG with ◇ indicator

まず、 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)
  })
});

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

Tweet

短縮URL:

2014年09月16日 WEB制作系 コード・プラグイン CSSjQueryパララックス