サイドスリーブログ

jQuery Mousewheel活用例|横スクロールな歴史ページを作ろう!


                jQuery Mousewheel活用例|横スクロールな歴史ページを作ろう!

こんにちは、ちぃさんです。
コーポレイトサイト制作の際「当社の今日までの歴史」を会社情報の沿革ページでさらっと終わらせずに絵巻物のような横スクロール(水平スクロール)形式で見せることで、閲覧者の方に楽しんでいただきながら「当社の歴史」を知っていただける魅せるページを作成することができます。

本日は、そんな魅せるページデザインをご紹介!!

jQuery Mousewheel | jQuery Plugin Registryというjs(jQueryライブラリ)を活用して、絵巻物風な横スクロール(水平スクロール)形式「当社の歴史」ページを作ります。

参考サイト:横スクロールを可能にできる「jquery.mousewheel」を使用してみた

まずはサンプル(デモ)をご覧ください

さっそくコードを書いてみましょう

js|head内で読み込む

js


<script src="js/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script>
//横スクロール用script
$(function() {
  var cont = $('#chronology');
  var contW = $('.chronology-box').outerWidth(true) * $('.chronology-box',cont ).length;
  cont.css('width', contW);
  var speed = 30;
  $('html').mousewheel(function(event, mov) {
  //ie firefox
    $(this).scrollLeft($(this).scrollLeft() - mov * speed);
    //webkit
    $('body').scrollLeft($('body').scrollLeft() - mov * speed);
    return false;
  });
});
//サンプル(デモ)中、ページトップのスクロールするとぼやける背景画像用script
$(window).scroll(function () {
  var chronologyTtl = $('.chronology-ttl').height();
  var scrollnow = $(window).scrollLeft();
  var scrollblur = (chronologyTtl+10*scrollnow)/chronologyTtl-1;
  var blur = Math.floor(scrollblur);
  $('.chronology-ttl').css('-webkit-filter','blur('+blur+'px)');
  $('.chronology-ttl').css('filter','blur('+blur+'px)');
});
</script>

HTML|

HTML


<div class="chronology-ttl">
  <h1 class="min"><img src="/images/logo.svg" alt="メンバー入社 年表">メンバー入社 年表</h1>
</div>
<div id="chronology">
  <div class="chronology-box">
    <div class="chronology-detail">
      <h2>xxxx年xx月</h2>
      <p>こんなこんなこんなことがありました。</p>
    </div>
  </div>
  <div class="chronology-box">
    <div class="chronology-detail">
      <h2>xxxx年xx月</h2>
      <p>あんなあんなあんなこともありました。</p>
    </div>
  </div>
</div>

CSS|

CSS


body {
  overflow: hidden;
}
#chronology {
  margin: 0 auto 0 100vw;
  height: 100vh;
  padding: 0;
  z-index: 10;
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,.8);
}
#chronology:after {
  content: "";
  position: absolute;
  bottom: 40px;
  left: 0;
  background: rgba(185, 7, 23, 1);
  width: 100%;
  height: 2px;
}
.chronology-box {
  float: left;
  margin: 0 auto;
  height: 100vh;
  padding: 0;
  z-index: 10;
  overflow: hidden;
  width: 300px;
  border-left: 1px dotted #ccc;
  position: relative;
}
.chronology-box:after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -5px;
  bottom: 36px;
  background: rgba(185, 7, 23, 1);
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
.chronology-detail {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 80%;
}
.chronology-detail h2, .chronology-detail p {
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  text-align: justify;
  line-height: 1.4;
  margin-bottom: 10px;
}
.chronology-detail h2 {
  text-align: center;
  font-weight: 600;
  color: rgba(185, 7, 23, 1)
}
.chronology-detail img {
  display: block;
  margin: 0 auto 10px;
  width: 160px;
}
.chronology-ttl {
  width: 100vw;
  height: 100vh;
  background: url(/demo/.assets/history-scroll01.jpg) no-repeat bottom center;
  background-size: cover;
  overflow: hidden;
  position: fixed;
}
.chronology-ttl h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  text-align: center;
  font-size: 30px;
  letter-spacing: .2rem;
  margin: -6% auto 0;
}
.chronology-ttl h1 img {
  width: 180px;
  display: block;
  margin: 0 auto 30px;
}

以上で、サンプル(デモ)のページの完成です!

いかがだったでしょうか。
みなさんもぜひお試しください!!

その他の Web制作ネタ帳 ブログ一覧