STEP 3：コンテンツを移動させる
座標が取得できたので、いよいよスクロールの動きを作成してみよう。コンテンツの表示ボックス（.holder）からはみ出している横幅に、スクロールエリア（scrHolder）上のマウスがいる位置（x座標）の割合を乗算することで、マウス位置の割合に応じてコンテンツが移動するようにする。
■ソースコード（HTML）※ STEP 1 のものと同じ
<div class="holder">
<div class="inner">
<div class="box"><h2>BOX 1</h2></div>
<div class="box"><h2>BOX 2</h2></div>
<div class="box"><h2>BOX 3</h2></div>
<div class="box"><h2>BOX 4</h2></div>
<div class="box"><h2>BOX 5</h2></div>
<div class="box"><h2>BOX 6</h2></div>
<div class="box"><h2>BOX 7</h2></div>
<div class="box"><h2>BOX 8</h2></div>
<div class="box"><h2>BOX 9</h2></div>
<div class="box"><h2>BOX 10</h2></div>
</div>
</div>■ソースコード（CSS）※ STEP 1 のものと同じ
.holder{
width: 800px;
height: 500px;
overflow: hidden;
margin: 10% auto;
border: 2px solid #4c3993;
}
.inner{
width: 300%;
height: 100%;
}
.box{
float: left;
width: 10%;
height: 100%;
background: #7972b4;
color: #a9e7dc;
text-align: center;
line-height: 500px;
}
.box:nth-child(odd){
background:#a9e7dc;
color: #7972b4;
}■ソースコード（JavaScript）
$(function(){
scrHolder = $(".holder"); //スクロールの表示エリア
scrInner = scrHolder.find(".inner"); //スクロールするコンテンツ
scrHolderWidth = scrHolder.width(); //scrHolderの横幅
scrInnerWidth = scrInner.width(); //scrInnerの横幅
scrHolder.on('mousemove', function(e){
//scrHolder上のマウスx座標を取得
mouseCoord = e.pageX - scrHolder.offset().left;
//scrHolderのscrollLeftを操作してscrInnerを動かす
scrHolder.stop().animate({
scrollLeft: (scrInnerWidth - scrHolderWidth) * (mouseCoord / scrHolderWidth)
});
});
});
↓
ここまででマウス座標に応じた横スクロールの動きが実現できたが、参考サイトと比べると動きがぎこちない。慣性スクロールのような滑らかな動きを取り入れるため、次のステップでイージングの設定を追加する。
STEP 4：スクロールをスムーズに
イージングには「jquery.easie.js」プラグインを利用する。
余韻のある動きにするため、終了にかけてゆっくりになるイージングがおすすめだ。プラグインサイトにあるベジェ曲線を見ながら、理想のイージングを探してみるとよいだろう。
■ソースコード（JavaScript）
$(function(){
scrHolder = $(".holder");
scrInner = scrHolder.find(".inner");
scrHolderWidth = scrHolder.width();
scrInnerWidth = scrInner.width();
scrHolder.on('mousemove', function(e){
mouseCoord = e.pageX - scrHolder.offset().left;
// イージングを追加し、スピードを調整
scrHolder.stop().animate({
scrollLeft: (scrInnerWidth - scrHolderWidth) * (mouseCoord / scrHolderWidth)
}, 300, $.easie(0,0,0,0.1));
});
});jquery.easie.jsプラグインを読み込み、設定をすると、だいぶスムーズにスクロールするようになった。
以上でx座標による横スクロールの動きが完成だ。
バリエーション＆アレンジのヒント
今回はx座標のみを利用した横スクロールを作成したが、y座標も組み合わせて利用すると、ECサイトで見かける画像のズーム表示の動きにも応用できる。
■ソースコード（HTML）
<div class="holder">
<div class="inner"><img src="img.jpg"></div>
</div>
■ソースコード（CSS）※STEP 1のコードに追記
.inner img {
width: 100%;
}
■ソースコード（JavaScript）
$(function() {
scrHolder = $(".holder");
scrInner = scrHolder.find(".inner");
scrInnerWidth = scrInner.width();
scrHolderWidth = scrHolder.width();
scrInnerHeight = scrInner.height();
scrHolderHeight = scrHolder.height();
scrHolder.on('mousemove', function(e){
mouseCoordX = e.pageX - scrHolder.offset().left;
mouseCoordY = e.pageY - scrHolder.offset().top;
scrHolder.stop().animate({
scrollLeft: (scrInnerWidth - scrHolderWidth) * (mouseCoordX / scrHolderWidth),
scrollTop: (scrInnerWidth - scrHolderWidth) * (mouseCoordY / scrHolderWidth)
}, 300, $.easie(0,0,0,0.5));
});
});
著者：大工原実里（だいくはら・みさと）
1989年生まれ。株式会社レターズのデザイナー。2011年からWebデザイナーとして働き始める。Webに関する活動拠点「Stronghold」というサイトでブログを書いたり、デザインの実験をしている。
