縦スクロールしたのに横にスクロール!?新しいパララックスの見せ方「jInvertScroll」

「jInvertScroll」は縦にスクロールさせると、横へ画面がスクロールする機能を実現するjQueryプラグインです。え?たったそれだけ?と思うかもしれません。しかしパララックスデザインにおいてとても斬新なUXを与えていると思います。

jInvertScroll

jInvertScroll

パララックスデザインとは縦に長く、1カラム構成なサイトデザインのことを言います。最近よく見かけますよね。個人的にはCoineyさんのホームページが大好きです。

Coiney

 

しかしこのプラグインを使って作るのは横に長いサイト。このような感じに横にスクロールします。斬新なUX。

jInvertScroll-demo-1

 

 

それでは「jInvertScroll」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="../dist/js/jquery.jInvertScroll.js"></script>

 

HTMLはこのようにマークアップします。ダウンロードすると付いてくるサンプルファイルを引用しています。

<div class="horizon scroll">
  <img src="images/horizon.png" alt="" />
</div>
<div class="middle scroll">
  <img src="images/middle.png" alt="" />
</div>
<div class="front scroll">
  <img src="images/front.png" alt="" />
</div>

 

CSSはこのように指定しました。こちらもサンプルファイルを参考に。

html,
body
{
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
}

body
{
  overflow-x: hidden;
}

.scroll
{
  position: fixed;
  bottom: 0;
  left: 0;
}

.horizon
{
  z-index: 1;
  width: 3000px;
}

.middle
{
  z-index: 500;
  width: 4000px;
}

.front
{
  z-index: 1000;
  width: 6000px;
}

 

JavaScriptはこのように実装します。

$.jInvertScroll(['.scroll'],
  {
  height: 6000,
  onScroll: function(percent) {
    console.log(percent);
  }
});

 

するとこのように作ることが出来ました。

jInvertScroll-sample-1

 

これはぜひぜひ使ってみたい。パララックスデザインのサイトを作ってみたいと思っていたので、どこかで試してみます。参考にどうぞ。

 

Home > JavaScript > 縦スクロールしたのに横にスクロール!?新しいパララックスの見せ方「jInvertScroll」

Return to page top