スクロールするとヘッダや打ち出しを美しい繊細なエフェクトで上部に隠すテクニック -Scrolling Banner

サイト構築 -制作

Post on:2014年6月9日

sponsorsr

先日の「スクロールやクリックした際に、おおっ！と思わせるクリエイティブな7つのエフェクト」はかなりインパクトがありましたが、今回紹介するのは非常に繊細なスクロールエフェクトです。

使用するのはよく見かけるレイアウトで、上部からヘッダ、ナビゲーション、打ち出し、コンテンツと積み重ねたものです。

Scrolling Banner

スクロールすると、コンテンツは通常通りスクロールされ、画像はパララックスで少し遅れて、カーテンをあげるような感じになっています。
他の要素も上部に上がりながら、フェードで消えていきます。

少しスクロールしたキャプチャ

コンテンツの表示ということに関しては、普通のスクロール操作と同じですが、ほんのちょっとエフェクトを加えるだけで印象がだいぶ変わりますね。

小さいと分かりにくいと思いますが、アニメーションgifにしてみました。

デモをアニメーションgifにしたもの

実際の動作やコードは、下記ページで確認できます。

Scrolling Banner

コードの主要なとこは、こんな感じです。

HTML

ヘッダ・ナビゲーション、打ち出し、コンテンツが、通常通りに垂直に配置されています。

<body>

<header>
  ヘッダ・ナビゲーション
</header>

<div class="banner">
  打ち出し
</div>

<div class="main">
  コンテンツ
</div>

</body>

CSS

打ち出し画像のとこをパララックスにしているスタイルシートは下記のようになります。シンプルなので、ここだけ使うのもありですね。

.banner {
  background: url(打ち出し画像.jpg) no-repeat fixed 50% 0;
  height: 22em;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.banner-text {
  color: #fff;
  font-size: 1.25em;
  left: 0;
  position: absolute;
  top: 75%;
  text-align: center;
  text-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
  width: 100%;
}

JavaScript

スクリプトで更に繊細なエフェクトを与えます。実装はjquery.jsを外部ファイルとし、下記のスクリプトを記述します。

function scrollBanner(config) {
  scrollPos = $(this).scrollTop();
  config.bannerText.css({
    'margin-top' : -(scrollPos/3) + "px",
    'opacity' : 1-(scrollPos/300)
  });
  config.banner.css({
    'background-position': 'center ' + (-scrollPos/4) + "px"
  });
}

$(document).ready(function(){
  $(window).scroll(function() {
    scrollBanner({
      banner: $('.banner'),
      bannerText: $('.banner-text')
    });
  });
});