指定範囲内でパララックスさせることがたまにあるので、実装方法をメモしておきます。
サンプルコード
スクロールの範囲と移動する範囲を指定して、パララックス要素の現在の値を返す関数を作ってみます。
.sample01、.sample02、.sample03をそれぞれ動かします。
HTML
1 2 3 | <div class="sample sample01"></div><div class="sample sample02"></div><div class="sample sample03"></div> |
CSSは必要な部分のみ抜粋しています。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .sample { position: absolute;}.sample01 { top: 1000px; left: 0;}.sample02 { top: 2000px; right: 300px;}.sample03 { top: 3000px; left: -20px;} |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | $(window).on('load scroll', function() { $('.sample01').css({ left: parallaxFunc(0, 400, 1000, 1500) }); $('.sample02').css({ right: parallaxFunc(300, -20, 2000, 2500) }); $('.sample03').css({ top: parallaxFunc(3000, 3700, 3100, 3900), left: parallaxFunc(-20, 500, 3100, 3900) });});/** * パララックス要素の現在の値を返す * @param num moveStart (required) パララックスで動かす要素の開始地点での値 * @param num moveEnd (required) パララックスで動かす要素の終了地点での値 * @param num scrollStart (required) パララックスで動かすスクロール範囲の開始地点 * @param num scrollEnd (required) パララックスで動かすスクロール範囲の終了地点 * @return num */function parallaxFunc(moveStart, moveEnd, scrollStart, scrollEnd) { var winScroll = $(window).scrollTop(); var winHeight = $(window).height(); // スクロール判定の基準位置 var scrollPos = winScroll + winHeight; // 現在の値の取得 var currentVal; // スクロール範囲に到達していない場合 if(scrollPos < scrollStart) { currentVal = moveStart; // スクロール範囲を過ぎている場合 } else if(scrollPos > scrollEnd) { currentVal = moveEnd; // スクロール範囲内の場合 } else { // スクロール範囲 var scrollRange = scrollEnd - scrollStart; // 移動範囲 var moveRange = Math.abs(moveEnd - moveStart); // 進行方向 var direction = moveStart < moveEnd ? 1 : -1; // 進捗率1%あたり進む距離 var moveRate = moveRange / 100 * direction; // 現在の進捗率 var progressRate = (scrollPos - scrollStart) / scrollRange * 100; currentVal = moveStart + progressRate * moveRate; } return currentVal;} |
parallaxFunc()の関数で現在のスクロール位置で各要素のCSSの値を返すようにしています。
パララックスのデモページ
コメントが承認されるまで時間がかかります。