menu
menu

キーワード検索

 

最近の投稿

ホイールの回転で要素間を移動するパララックスレイアウト

  • Labs

jQuery

こんにちは(・∀・)

今回はマウスホイールを回転させると要素間を移動するパララックスレイアウトのサンプルをご紹介したいと思います。表示される画面ごとにスクロールしますので長いコンテンツは入れられないため使い道は限られますが、スタートページ的な使い方をしたり、個人や企業のポートフォリオサイト的に使って見ると面白そうです。

前回ご紹介しましたCSSだけでパララックスレイアウトと同様、スマホサイトにも対応したレスポンシブデザインですが、スマホサイトでは背景画像は固定しないためパララックスレイアウトではなくなります。また、一部Android端末の横画面だとうまく動作しない可能性があります。

サンプル
HTML

Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。

今回はjquery.mousewheel.min.jsとjquery.easing.1.3.jsを使いますのでそれぞれダウンロードしてください。

jquery.mousewheel.min.js
jquery.easing.1.3.js


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="jquery.easing.1.3.js"></script>

<body>
<div id="wrapper">
<div id="contents">
<div id="main">
<article id="content1">
<h1><a href="http://www.webdlab.com/">Webデザインラボ</a></h1>
<section>
<h2>jQueryでパララックスエフェクトなレイアウト</h2>
<div class="btns">
<p class="prev"><span>∧</span></p>
<p class="next"><a href="#content2">∨</a></p>
<!--btns--></div>
</section>
</article>
<article id="content2">
<section>
<h2>jQueryでパララックスエフェクトなレイアウト</h2>
<div class="btns">
<p class="prev"><a href="#content1">∧</a></p>
<p class="next"><a href="#content3">∨</a></p>
<!--btns--></div>
</section>
</article>
<article id="content3">
<section>
<h2>jQueryでパララックスエフェクトなレイアウト</h2>
<div class="btns">
<p class="prev"><a href="#content2">∧</a></p>
<p class="next"><a href="#content4">∨</a></p>
</section>
</article>
<article id="content4">
<section>
<h2>jQueryでパララックスエフェクトなレイアウト</h2>
<div class="btns">
<p class="prev"><a href="#content3">∧</a></p>
<p class="top"><span><a href="#content1">Top</a></span></p>
<!--btns--></div>
</section>
<div id="copyright">&copy;web design lab<!--copyright--></div>
</article>
<!--main--></div>
<div id="nav">
<ul>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--nav--></div>
<!--contents--></div>
<!--wrapper--></div>
</body>
CSS

#wrapper {
  position: relative;
  overflow: hidden;
}
#contents {
  position: relative;
}
#contents #main {
  position: relative;
}
#contents #main article {
  position: relative;
  margin: 0 auto;
}
#contents #main article h1 {
  padding: 10px;
  position: fixed;
  z-index: 100;
}
#contents #main article h1 a {
  color: #9fb7d4;
  font-size: 100%;
}
#contents #main #content1 {
  background: url(img/bg1.jpg) no-repeat 50% 0 fixed;
  background-size: cover;
}
#contents #main #content2 {
  background: url(img/bg2.jpg) no-repeat 50% 0 fixed;
  background-size: cover;
}
#contents #main #content3 {
  background: url(img/bg3.jpg) no-repeat 50% 0 fixed;
  background-size: cover;
}
#contents #main #content4 {
  background: url(img/bg4.jpg) no-repeat 50% 0 fixed;
  background-size: cover;
}
#contents #main article section {
  background: rgba(159, 183, 212, 0.7);
  width: 80%;
  padding: 10px;
  position: relative;
  margin: 0 auto;
  top: 40px;
}
#contents #main article section h2 {
  color: #fff;
  font-size: 100%;
}
#copyright {
  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  color: #9fb7d4;
  z-index: 100;
}
.btns {
  position: absolute;
  right: 10px;
  top: 40%;
}
.btns .top,
.btns .prev,
.btns .next {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
}
.btns .prev span {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ccc;
  color: #fff;
  font-size: 22px;
  line-height: 2.2;
  text-indent: 0.1em;
}
.btns .top a,
.btns .prev a {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #9fb7d4;
  color: #fff;
  font-size: 22px;
  line-height: 2.2;
  text-indent: 0.1em;
}
.btns .next a {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #9fb7d4;
  color: #fff;
  font-size: 22px;
  line-height: 2.5;
  text-indent: 0.1em;
}
.btns .top span a {
  font-size: 18px;
  line-height: 2.8;
  text-indent: 0.5em;
}
.btns .top a:hover,
.btns .prev a:hover,
.btns .next a:hover {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #4776AF;
}
#nav {
  position: fixed;
  right: 40px;
}
#nav li {
  width: 12px;
  height: 12px;
  background: #9fb7d4;
  cursor: pointer;
  margin: 0 0 10px 0;
}
#nav li.selected {
  background: #d49fc2;
}
JavaScript

$(function () {
contents = $("#contents");
nav = $("#nav ul");
num = 0;
contentset();
function contentset() {
var wrapper  = $("#wrapper");
winhight = $(window).height();
navheight = (winhight - nav.height()) / 2;
wrapper.css("height", winhight);
$("#nav").css("top", navheight);
}
nav.children("li").click(function(){
nav.children("li").removeClass("selected");
$(this).addClass("selected");
movecontent();
var num = nav.children("li").index(nav.children(".selected"));
animcontent(num);
});
function movecontent() {
var content = $("article");
var num = nav.children("li").index(nav.children(".selected"));
contentmgn = $("article").height();
contentmgn = -(num * contentmgn);
contents.animate({"top": contentmgn}, 1000, "easeInOutExpo");
}
$(".prev").click(function(){
var btnslect = nav.children("li").index(nav.children(".selected")) - 1;
nav.children("li").removeClass("selected");
nav.children("li").eq(btnslect).addClass("selected");
movecontent();
return false;
animcontent(num);
});
$(".next").click(function(){
var btnslect = nav.children("li").index(nav.children(".selected")) + 1;
nav.children("li").removeClass("selected");
nav.children("li").eq(btnslect).addClass("selected");
movecontent();
return false;
animcontent(num);
});
$(".top").click(function(){
nav.children("li").removeClass("selected");
nav.children("li").eq(0).addClass("selected");
movecontent();
return false;
animcontent(num);
});
$("html,body").mousewheel(function(event, delta, deltaX, deltaY) {
if(!contents.is(":animated")) {
if(delta < 0) {
if(nav.children("li").eq(3).attr("class") !== "selected") {
var select1 = nav.children("li").index(nav.children(".selected")) + 1;
nav.children("li").removeClass("selected");
nav.children("li").eq(select1).addClass("selected");
movecontent();
var num1 = nav.children("li").index(nav.children(".selected"));
animcontent(num1);
}
} else if(delta > 0) {
if(nav.children("li").eq(0).attr("class") !== "selected") {
var select2 = nav.children("li").index(nav.children(".selected")) - 1;
nav.children("li").removeClass("selected");
nav.children("li").eq(select2).addClass("selected");
movecontent();
var num2 = nav.children("li").index(nav.children(".selected"));
animcontent(num2);
}
}
event.preventDefault();
}
});
});
/*------------------------------------------------------------------*/
$(window).load(function() {
//画面高さ取得
h = $(window).height();
h2 = h - 120;
$("#contents #main article").css("min-height", h + "px");
$("#contents #main article section").css("min-height", h2 + "px");
});
$(window).resize(function() {
//画面リサイズ高さ取得
h = $(window).height();
h2 = h - 120;
$("#contents #main article").css("min-height", h + "px");
$("#contents #main article section").css("min-height", h2 + "px");
});
Result

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
QRコード

使用している背景画像のサイズは1600x1064pxです。

いかがでしたでしょうか、マウスホイールを回転させて画面を移動させるパララックスレイアウトのサンプルでした。作り方によってはとても印象深いデザインのWebサイトを簡単に作ることができるのでオススメです。


関連リンク

いろいろ組み合わせてパララックスレイアウト
CSSだけでパララックスレイアウト

  • カテゴリー:Labs