先端サイトに学ぶCSS3/jQueryアニメーションデザイン ― 第2回

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

今回の注目サイト：
Universiteit van Nederland

http://www.universiteitvannederland.nl/

オランダの大学教授の講義を無料配信しているサイト。

軽快でなめらかなカルーセルパネル

　毎週アップロードされる充実した動画コンテンツを、カルーセルパネルやボックスレイアウトで賑やかかつコンパクトにまとめている「Universiteit van Nederland」。このサイトのカルーセルパネルは、マウスカーソルの位置に応じて軽快でなめらかに動く。

　今回はこのサイトを参考に、jQueryを使ってマウス座標に応じて横にスクロールするデモを作成する。

STEP 1：基本構造を用意する

　今回作成するカルーセルは、横長のコンテンツをマウスの座標に応じて左右に移動させることで、スクロールの動きを演出している。

　通常のボックススクロールでは、overflow: scroll; でスクロールバーを表示させ、スクロールバーの操作によってコンテンツを移動させる。今回のカルーセルは、スクロールバーの代わりにマウス座標を利用するため、overflow: hidden;で表示ボックス（.holder）からはみ出す部分を非表示化。内部（.inner）に横長のコンテンツを配置し、jQueryで表示ボックスのscrollLeftを操作してコンテンツを横移動させる仕組みだ。

■ソースコード（HTML）

<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）

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

　HTMLとCSSの記述は以上で完了だ。jQueryを利用するので忘れずに読み込んでおく。

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

STEP 2：マウス座標の取得

　基本的なレイアウトができたので、次にjQueryを使ってマウスの座標を取得する。ページ内のマウス座標は e.pageX / e.pageY で取得できる。以下はmousemove()イベントでマウス座標を得て、テキストで値を表示するデモだ。

■ソースコード（HTML）

<div class="target"></div>
<p class="coord"></p>

■ソースコード（JavaScript）

$(function(){
  $('.target').on('mousemove', function(e) {
    // 座標を取得
    x = e.pageX; //ページ上のx座標（ページ左端からの距離）
    y = e.pageY; // e.pageY：ページ上のy座標（ページ頭からの距離）

    // 座標の値を表示
    $('.coord').text("x座標：" +  x + ",　y座標：" + y);
  });
});

　e.pageX / e.pageY ではページ端からの座標が取得できる。作成するカルーセルでは、スクロールするエリア（表示ボックス）の左上を基準とした位置を知りたいので、基準となる座標を求めて、pageX / pageY の値から減算する。

　e.page X / e.pageYで得られる値を丸で表示したデモがこちら。

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

■ソースコード（HTML）

<div class="target">
  <div class="pointBefore"></div>
  <div class="pointAfter"></div>
</div>
<p class="coord"></p>

■ソースコード（CSS）

.target{
  width:800px;
  height:500px;
  margin: 4% auto 2%;
  background: #e3dff6;
  position: relative;
  overflow: hidden; 
}
.pointBefore, .pointAfter {
  width: 20px; 
  height: 20px; 
  border-radius: 10px; 
  position: absolute;
}
.pointBefore {
  background: #66c5d7; 
}
.pointAfter {
  background: #e64459;
}
.coord {
  padding: 10px; 
  background: #66c5d7; 
  border-radius: 5px; 
  width: 200px; 
  margin: 0 auto; 
  color: #fff; 
  font-size: 14px;
}

■ソースコード（JavaScript）

$(function(){
  $('.target').on('mousemove', function(e) {
    // 座標を取得
    x = e.pageX; //ページ上のx座標（ページ左端からの距離）
    y = e.pageY; // e.pageY：ページ上のy座標（ページ頭からの距離）
    // 座標の値を表示
    $('.coord').text("x座標：" +  x + ",　y座標：" + y);
    // 座標の位置を$('.target')の左上を基準にして表示
    $('.pointBefore').css({'left': e.pageX, 'top': e.pageY}); //青丸
    var ref = $('.target').offset();
    $('.pointAfter').css({'left': e.pageX - ref.left, 'top': e.pageY - ref.top}); //赤丸
  });
});

　青丸は、e.pageX / e.pageYで得たマウス座標をそのまま使用して、ボックス内にabsoluteで配置したもの。赤丸は、マウス座標から表示ボックス（.target）の左上のオフセット値を差し引いて配置したもの。

　青丸は表示ボックス左上の座標＋ページ左上からのマウス座標となるため、表示ボックスの余白の分だけ右下にずれてしまうのがわかる。そこで、赤丸で示した座標を利用してスクロールを作成していく。