- Web制作ネタ帳
writer / ちぃさん
jQuery Mousewheel活用例｜横スクロールな歴史ページを作ろう！
こんにちは、ちぃさんです。
コーポレイトサイト制作の際「当社の今日までの歴史」を会社情報の沿革ページでさらっと終わらせずに絵巻物のような横スクロール（水平スクロール）形式で見せることで、閲覧者の方に楽しんでいただきながら「当社の歴史」を知っていただける魅せるページを作成することができます。
本日は、そんな魅せるページデザインをご紹介！！
jQuery Mousewheel | jQuery Plugin Registryというjs（jQueryライブラリ）を活用して、絵巻物風な横スクロール（水平スクロール）形式「当社の歴史」ページを作ります。
まずはサンプル（デモ）をご覧ください
さっそくコードを書いてみましょう
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;
}
以上で、サンプル（デモ）のページの完成です！
いかがだったでしょうか。
みなさんもぜひお試しください！！
みなさんもぜひお試しください！！
