マウスホイールを使ってスクロールした際に
縦にスクロールするのではなく、画面全体を横（水平）にスクロールさせることで
ページ全体に流れるような演出を加えているWebサイトを最近よく見かけます。
そんなマウスホイールでの横スクロールに加えて
ページ上の要素をレイヤー状に重ね合わせて、
奥行のあるパララックス効果もつけてスクロールさせる動作を
jQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。
jQueryで横スクロールのパララックスサイトを作成する方法
「jQueryで横スクロールのパララックスサイトを作成する方法」サンプルを別枠で表示
サンプルではページ上に3つのブロック要素をレイヤー状に重ね合わせて
画面上をマウスホイールでスクロールさせることで
各レイヤーを左右に水平スクロールします。
※レイヤー状に重ね合わせているブロック要素を「パネル要素」とします。
マウスホイールでスクロールする距離を
各レイヤーによって制御することで
奥行感のあるパララックス効果を加えています。
全体構成についてまずはHTMLから。
◆HTML <div class="scrollPanel" id="area1"></div> <div class="scrollPanel" id="area2"></div> <div class="scrollPanel" id="area3"></div>
画面上に重ね合わせて配置することとなる
パネル要素を使用する枚数分、設置します。
各パネル要素には共通のCSSクラスをつけます。
※サンプルでは「.scrollPanel」とします。
CSSクラスと合わせてID等をつけて置くことで
それぞれのパネル要素に対して個別の指定ができるようにしておきます。
（個別のCSSクラスを追加でも可能です。）
この要素に対してCSSは以下のように指定します。
◆CSS
/* ------------------------------
.scrollPanel
------------------------------ */
.scrollPanel {
top: 0;
left: 0;
text-align: left;
position: fixed;
}
#area1 {
width: 5000px;
background: url(../img/bg2.png) repeat-x left 100px;
z-index: 2;
}
#area2 {
width: 8000px;
background: url(../img/bg1.png) repeat-x left 200px;
z-index: 3;
}
#area3 {
width: 3000px;
background: url(../img/bg3.png) repeat-x left 300px;
z-index: 1;
}
パネル要素全体の指定として
共通で付与したCSSクラスに対して
「position:fixed」にて固定位置の指定をします。
個別につけたIDに対しては
それぞれの幅と重ねる順番を指定します。
（背景画像はサンプル用の装飾用指定になります。）
ここで指定する各パネルごとの幅の違いによって
スクロールする距離がそれぞれ変化し、パララックス効果を与えます。
そして実際の切り替えスクリプトは以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
var scrollElm = $('.scrollPanel'),
wheelLength = 10;
scrollElm.each(function(){
var self = $(this),
areaWidth = self.width();
if(areaWidth > $('body').width()){
$('body').css({width:areaWidth});
}
$(window).on('load resize', function(){
$('body').css({height:window.innerHeight});
self.css({height:window.innerHeight});
}).on('scroll', function(){
var scrX = $(window).scrollLeft(),
posLeft = Math.floor((self.width() - window.innerWidth) * (scrX / ($('body').width() - window.innerWidth)) * -1);
self.css({left: posLeft});
});
// MouseWheelEvent
var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).on(mousewheelevent,function(e){
if(e.originalEvent.deltaY > 0){
scrLeft = $(window).scrollLeft() + wheelLength;
} else {
scrLeft = $(window).scrollLeft() - wheelLength;
}
$(window).scrollLeft(scrLeft);
});
});
});
</script>
スクリプト開始部分にある設定値の内容は以下の様になっています。
| scrollElm = $(‘.scrollPanel’) | 横スクロールさせるパネル要素 |
|---|---|
| wheelLength = 10 | マイスホイールの1回の回転で進める距離 |
これらの設定値を変更することで微調整が可能になっています。
「wheelLength」で設定する値は、あまり大きくしてしまうと
マウスホイールでスクロールした際にカクカクした動きになり
スムーズなスクロール動作にはならなくなってしまうのでご注意ください。
設置してあるパネル要素の中で一番幅が大きい値をbodyに入れて、
その幅に併せて各パネル要素を横スクロールさせます。
ページ上でのスクロール処理については
スクロールした際に横スクロール値「$(window).scrollLeft()」を取得して、
それぞれのパネル要素の幅との比例を計算して、
パネルごとに個別の「left」値を入れ、横に移動させています。
マウスホイール動作では上方向にスクロールしたか
下方向にスクロールしたかを取得して
現状の横スクロール値「$(window).scrollLeft()」に
変数「wheelLength」を足し引きして、
ページ全体をスクロール移動させることで
スクロールイベントを発生させています。
以上がjQueryを使って
横スクロールでのパララックス動作を実装する紹介でした。
車やバイクなどの乗り物をイメージするサイトやギャラリーのようなサイト
または沿革のような年代や歴史を表現するサイトなどで横スクロールを効果的に使うことで
おもしろい演出を組み込んだ構成にすることができるのではないでしょうか。
jQueryを使って横スクロールでのパララックス動作を実装する際にぜひ。。。