# 背景画像の動きをずらして立体的に見せる

  • 1. background-position-y / background-position-xを個別に指定

    background: / background-position / でまとめて指定していると、スクリプトでcssを書き換えた際に、背景画像の左右の位置も動いてしまうので、 基本的にはbackground-position-y / background-position-xで画像の位置を小分けにしていします。

  • 2. – か + かで上下どちらに移動するかを調整

    $connect.css({‘background-position-y’: 90 – ( current / 2 ) + ‘%’}); の90の後を”-“にすればスクロールするにつれて上に登り、 “+”にすると下に落ちるように見える。また”+”に変更する際は、計算結果が 50%前後になるように”90″の値を調整する。

  • 3. $connect.css({‘background-position-y’: 90 – ( current / 2 ) + ‘%’});で速度を変更

    $connect.css({‘background-position-y’: 90 – ( current / 2 ) + ‘%’});の “/ 2″の数値を変更することで値の変動率が変わってきます。 “2”を”1″にすればこれまでのスクロールの倍のスピードで移動します。”5″などにするとほとのど今まで通りの動きになります。2番の調整と合わせて うまく数値を変更しましょう。

									
						$(function () {
			        $('.scroll').each(function () {
			          var $win = $(window),
			              $winH = $win.height(),
			              $connect = $(this),
			              position = $connect.offset().top,
			              current = 0,
			              scroll;
			          $win.on('load scroll', function () {
			            scroll = $win.scrollTop();
			            current = (1 - (position - scroll) / $winH) * .6 * 100;
			            if (current > 99.9) {
			              current = 100;
			            }
			            if (scroll > position - $winH) {
			              $connect.css({'background-position-y': 90 - ( current / 2 ) + '%'});
			            }
			          });
			        });
			      });