このページの本文へ

マウスオーバーで動くなめらかカルーセルパネル (2/2)

2014年05月26日 11時00分更新

文●大工原実里/Stronghold

  • この記事をはてなブックマークに追加
本文印刷

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));
  });
});

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/002/5.html

著者:大工原実里(だいくはら・みさと)

著者写真

1989年生まれ。株式会社レターズのデザイナー。2011年からWebデザイナーとして働き始める。Webに関する活動拠点「Stronghold」というサイトでブログを書いたり、デザインの実験をしている。

前へ 1 2 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く