jQuery で実現する パララックス効果をヒントにしたシンプルで新しいスクロール背景 new

背景画像のトップとボトムが、ページのトップとボトムと一致するように、
ページの長さに応じてスクロール量が変化する背景を設定する方法です。

ページのスクロールとは独立して(ページの縦幅に関係なく)、背景は背景画像の高さ(height)までしかスクロールしません。

ちょっと前から主流の fixed や、伝統の scroll に並ぶ、
新しい種類の背景(background-attachment)と言えるのではないでしょうか!


特徴

  • 繰り返さない一枚絵の美しさと、ユーザーの操作に応えるインタラクションを兼ね備えています。
  • パララックス効果を使った背景よりもシンプルです。
  • 実装もシンプルで比較的 簡単です。

サンプルページ

当ブログのトップページがサンプルです。

コンテンツのスクロール量と、背景のスクロール量に注目。
スクロール バーでスクロールさせると、滑らかで分かりやすいかも知れません。

続きに jQuery コードと簡単な解説を書きます。

jQuery コード

$(window).scroll(function(){
    var wh = $(window).height();
    var dh = $(document).height();
    var st = $(document).scrollTop();

    if ( dh > wh ){
        $('body').css('backgroundPosition', '50% ' + ~~(st/(dh-wh)*100) + '%');
    }
});

body 要素の開始タグ直後に書けばOKだと思います。

簡単な解説

基本

背景画像の background-position は、縦位置の場合
0% を指定すると、背景には画像のトップから下、ウィンドウの高さまで表示され、
100% を指定すると、背景には画像のボトムから上、ウィンドウの高さまで表示されます。

つまり

背景画像の background-position を、
ページのスクロール量が最小(ゼロ)であるページのトップにいるとき 0% で、
ページのスクロール量が最大(max)であるページのボトムにいるとき 100% に設定すればよいわけです。

計算式

  • ~~( st / (dh - wh) *100 ) + '%'

現在のスクロール量は st = $(document).scrollTop() で取得、
それがページ全体 dh = $(document).height() の何パーセントに当たるか計算し、
それをそのまま background-position の縦位置に設定します。
(このパーセンテージは 0% から 100% の間で変化することは自明でしょう)

ページのスクロール量 st = $(document).scrollTop() は、
ページ全体 dh = $(document).height() からウィンドウの高さ wh = $(window).height() を引いた値にて最大(max)になることに注意です。

6/18 以下に新しい計算式を追記

新しい計算式

  • ~~(st / (dh - wh) *10000) / 100 + '%'

1~100% までの 100段階ではスクロールが粗いため、100倍の 1万段階に。
こちらの方が美しいと思います。

高速な整数変換

~ (チルダ)は、補数(not)を求めるビット演算子です。
JavaScript ではビット演算の際、数値を32ビットの符号付整数に変換するそうで、not の not を取ることで整数に変換できます。Math.floor を使うより高速だそうです。

  • ~~(小数) → 整数

他には、ゼロと or を取る方法もあるようです。

  • 小数 | 0 → 整数
参考サイト: IT戦記「Math.floor を使わずに小数を整数にする

スタイルシート

縦に長い背景画像を用意し、スタイルシートにて設定しておきます。
当ブログでは、現在 主流のフルHD ディスプレイで 2画面相当(2160px)の画像を用意しました。

スタイルシートは、例えば以下のように書きます。

background: no-repeat 50% 0 fixed url(/background_image.jpg);

「fixed」は必須です。
リピート指定は、「no-repeat」か、「repeat-x」です。


ちょっとした応用

縦位置を 100 から引き算して、100% → 0% で変化させると、ページを下にスクロールすると背景は上に、ページを上にスクロールすると背景は下にスクロールし、登ったり降りたりしているかのような視覚効果を出すことも可能です。

当ブログをサンプルにして試すにはココをクリックしてください。意外に面白いです。
ココをクリックすると元に戻ります。

変化させるのを横位置にすると、ページは縦にスクロール、背景は横にスクロール、なんてこともできます。


ひょっとして 新しいの生み出しちゃった?

検索しても出てこない、というか なんてワードで検索したら先人を見つけられるのか分かりません。
「この発想は無かった」「初めて見ました。すごい」とか自演コメントで こじょが発明者という既成事実を...(^ω^)

この記事をツイツイする tweetSearch

Commentあなたのコメントをぜひ書き残してください!

新しいコメント

※設定しておくとあとからコメントを編集できます
管理者にだけ表示を許可する
※公開されません

Trackback あなたのウェブページをリンク!

Trackback URL

© こじょらぼ all rights reserved.

旧 すぐへこたれるこじょblog

Guild Wars 2 © 2010-2014 ArenaNet, LLC. and NC Interactive, LLC. All rights reserved. Guild Wars, Guild Wars 2, ArenaNet, NCSOFT, the Interlocking NC Logo, and all associated logos and designs are trademarks or registered trademarks of NCSOFT Corporation. All other trademarks are the property of their respective owners.

FC2Ad

Back to Top