スクロール量に応じボックス内の要素を移動し錯覚効果と透明度変化

単色カラーのボックスであれば、スクロール量に応じてボックス内の要素をX方向へ移動します。序に、通常のスピードでY方向上昇するボックスまでもがまるで斜め上に上がっていくような錯覚を生み出します。移動要素の距離を画面幅に応じて調整すれば画面からはみ出すこともありません。
また、透明度の変化もスクロール量に応じて計算することによって、要素を自然とフェードインできます。

背景のボックスに画像を入れている場合は、斜め上に上がっていくような錯覚は期待できないと思われますので（試してはいませんが）、ご了承ください。

contents

使用するもの
実装
CODEPENで確認(X方向にのみ移動した場合)
CODEPENで確認(XY方向 + 文字をフェードインする場合)
最後に

使用するもの

HTMLファイル（jQuery及びご利用のJSファイル、CSSファイルを読み込んでおいてください）
CSSファイル
JSファイル（記述量少なめ）

実装

手順の概要

①HTMLで移動させたい要素をボックスの子要素とし、position: absolute; で、最初の位置を指定しておきます。

②jQueryでスクロール量を取得し、ボックスや画面幅を考慮した上で移動させたい距離等を計算し決めておきます。

③移動させたい要素に対して、jQueryのCSSメソッドのプロパティの値に計算式を入れます。

CODEPENで確認(X方向にのみ移動した場合)

正直に申し上げますと、CodePenの小さな画面では、斜め上に上がっていくような錯覚効果は分かりづらいかもしれませんので、ご了承ください。
というのも、画面幅や高さに依存するところが大きいです。
ご興味があれば、ご自身の環境にコピペして大きなブラウザでご確認下さい。

但し、まだ諦めないでください。事項に別のバージョンを用意していますので。

See the Pen scroll transformX by blue moon (@blue-moon) on CodePen.

HTMLファイル

<body>
  <div class="container">
    <div class="left">
      <div class="box pink">
        <h1>pink</h1>
      </div>
      <div class="box orange">
        <h1>orange</h1>
      </div>
      <div class="box yellow">
        <h1>yellow</h1>
      </div>
    </div>
    <div class="right">
      <div class="box blue">
        <h1>blue</h1>
      </div>
      <div class="box green">
        <h1>green</h1>
      </div>
      <div class="box purple">
        <h1>purple</h1>
      </div>
    </div>
  </div>
</body>

CSSファイル

body {
  margin: 0;
  color: #777;
  font-size: 14px;
}

.container {
  margin: auto;
  width: 100%;
  height: 100vh;
  display: flex;
}

.left, .right {
  width: 50%;
  height: 100%;
}

.box {
  width: 100%;
  height: 200px;
  position: relative;
}

h1 {
  margin: 0;
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 22px;
  color: #fff;
}

.pink {
  background: #ff4ca5;
}

.orange {
  background: #ffa54c;
}

.yellow {
  background: #ffff4c;
}

.blue {
  background: #4ca5ff;
}

.green {
  background: #4cffa5;
}

.purple {
  background: #a54cff;
}

JSファイル

$(window).scroll(function() {
  const winScroll = $(this).scrollTop();
  console.log(winScroll); //計算の参考のためスクロール量を確認（削除可）
  $('h1').css('transform', 'translateX(' + winScroll*0.5 + 'px)');
});

補足説明

注意点は、X方向の移動距離がボックス内からはみ出ると横スクロールが発生しますので、はみ出させたくない場合は（それが普通だと思いますが）移動距離を適宜調整してください。

実際に、このCODEPENで下までスクロールすると横スクロールが発生しているのがご確認いただけると思います。
これは、少しでも錯覚効果を感じてもらえればと思い、移動距離や文字の大きさを大きくしたためです。

CODEPENで確認(XY方向 + 文字をフェードインする場合)

X方向だけの移動のみでも十分だと思いますが、Y方向の移動や透明度の変化を加えるとより面白い効果が得られると思います。

スクロールすると文字が横からフェードインしながら移動します。

See the Pen scroll transformXY opacity by blue moon (@blue-moon) on CodePen.

HTMLファイル

前述のパターンと同じです。

CSSファイル

body {
  margin: 0;
  color: #777;
  font-size: 14px;
}

.container {
  margin: auto;
  width: 100%;
  height: 100vh;
  display: flex;
}

.left, .right {
  width: 50%;
  height: 100%;
}

.box {
  width: 100%;
  height: 200px;
  position: relative;
}

h1 {
  margin: 0;
  position: absolute;
  top: -10px;
  left: 0;
  color: #fff;
  opacity: 0;
}

.pink {
  background: #ff4ca5;
}

.orange {
  background: #ffa54c;
}

.yellow {
  background: #ffff4c;
}

.blue {
  background: #4ca5ff;
}

.green {
  background: #4cffa5;
}

.purple {
  background: #a54cff;
}

補足説明

フェードインする要素（h1タグ）は、CSSファイルでデフォルトでopasity: 0; にしておきます。

JSファイル

$(window).scroll(function() {
  const winScroll = $(this).scrollTop();
  console.log(winScroll); // 計算の参考のためスクロール量を確認（削除可）
  $('h1').css({
    'transform': 'translate(' + winScroll*0.2 + 'px,' + winScroll*0.2 + 'px)',
    'opacity': winScroll*0.015
  });
});

補足説明

CSSメソッドに記述するプロパティの値は、スクロール量を取得し格納した変数を使って計算した値にしてください。
例）’opacity’: winScroll（変数）*0.01
単純に数値を入力してしまうと、スクロール量に応じた変化になりませんのでご注意ください。

なお、opacityの値の範囲は0～1ですが、計算値が1を超えても1と同じ不透明となります。逆にマイナスになると文字が逆さになってしまいました。

最後に

パララックス効果のJSライブラリについての下記の記事を書いているときに、ライブラリなしでも似たようなことができないかと思い考案しました。

カスタマイズの幅も広がると思いますので、必要に応じてご利用下さい。