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>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webデザインラボ</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--Require Mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<!--Require Stylesheet-->
<link rel="stylesheet" href="sample.css">
<!--Require JavaScript-->
<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>
<script src="parallax.js"></script>
</head>
<body>
<div id="wrapper">
<h1 id="toplogo"><a href="/"><img src="logo.png" alt="Webデザインラボ"></a></h1>
<div id="wrap-inner">
<article id="contents1">
<section>
<div>
<h2>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</div>
</section>
</article>
<article id="contents2">
<section>
<h3>2. Suspendisse ac risus placerat, consequat erat eget, varius ligula</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu lacinia tellus. Donec tristique dui at enim rutrum, a venenatis augue feugiat. Curabitur eu faucibus magna. Suspendisse ac risus placerat, consequat erat eget, varius ligula. Nullam eu condimentum justo. Vestibulum laoreet enim et pulvinar condimentum. Fusce ac commodo orci.</p>
</section>
</article>
<article id="contents3">
<section>
<div>
<h2>3. Sed turpis elit, malesuada vitae orci eget, rutrum fringilla ipsum</h2>
</div>
</section>
</article>
<article id="contents4">
<section>
<h3>4. Aliquam gravida malesuada lobortis</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu lacinia tellus. Donec tristique dui at enim rutrum, a venenatis augue feugiat. Curabitur eu faucibus magna. Suspendisse ac risus placerat, consequat erat eget, varius ligula. Nullam eu condimentum justo. Vestibulum laoreet enim et pulvinar condimentum. Fusce ac commodo orci.</p>
</section>
</article>
<article id="contents5">
<section>
<div>
<h2>5. Duis eros sapien, feugiat eu mi ac, blandit consequat lorem</h2>
</div>
</section>
</article>
<article id="contents6">
<section>
<h3>6. Fusce nec tortor semper, interdum lacus eu, blandit purus</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu lacinia tellus. Donec tristique dui at enim rutrum, a venenatis augue feugiat. Curabitur eu faucibus magna. Suspendisse ac risus placerat, consequat erat eget, varius ligula. Nullam eu condimentum justo.</p>
<div id="copyright">&copy;WEB DESIGN LAB<!--copyright--></div>
</section>
</article>
<article id="contents7">
<section>
<div>
<h2>7. Aenean elementum lorem sed nibh euismod consequat</h2>
</div>
</section>
</article>
<div id="nav">
<ul>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--nav--></div>
<!--wrap-inner--></div>
<!--wrapper--></div>
</body>
</html>
CSS

#wrapper {
	position: relative;
	overflow: hidden;
}
#wrapper #wrap-inner {
	position: relative;
}
#wrapper h1 {
	position: absolute;
	width: 100%;
	z-index: 100;
	background: #777;
	text-align: center;	
	opacity: 0.9;
}
#wrapper #wrap-inner article {
	position: relative;
	min-height: 100vh;
	height: 100%;
}
#wrapper #wrap-inner article section {
	background: rgba(51, 51, 51, 0.5);
	padding: 60px 17px 60px 5px;
	position: relative;
	min-height: 100vh;
	height: 100%;
}
#wrapper #wrap-inner article section div h2 {
	text-align: center;
	color: #fff;
	font-size: 18px;
	width: 300px;
	margin: 0 auto;
}
#wrapper #wrap-inner article section h3 {
	color: #fff;
	font-size: 18px;
	text-align: center;
	margin-bottom: 10px;
}
#wrapper #wrap-inner #contents1 {
	background: url(img/bg1.jpg) no-repeat 50% 0;
	background-size: auto 100%;
}
#wrapper #wrap-inner #contents2 {
	background: #999;
}
#wrapper #wrap-inner #contents3 {
	background: url(img/bg3.jpg) no-repeat 50% 0;
	background-size: auto 100%;
}
#wrapper #wrap-inner #contents4 {
	background: #999;
}
#wrapper #wrap-inner #contents5 {
	background: url(img/bg5.jpg) no-repeat 50% 0;
	background-size: auto 100%;
}
#wrapper #wrap-inner #contents6 {
	background: #999;
}
#wrapper #wrap-inner #contents7 {
	background: url(img/bg7.jpg) no-repeat 50% 0;
	background-size: auto 100%;
}
#nav {
	position: fixed;
	right: 5px;
}
#nav li {
	width: 12px;
	height: 12px;
	background: #aaa;
	cursor: pointer;
	margin: 0 0 10px 0;
}
#nav li.selected {
	background: #777;
}
@media only screen and (min-width: 768px) {
#wrapper #wrap-inner article section div h2 {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -45%);
	font-size: 34px;
	width: 100%;
}
#wrapper #wrap-inner article section h3 {
	font-size: 34px;
}
#wrapper #wrap-inner #contents1 {
	background: url(img/bg1.jpg) no-repeat 50% 0 fixed;
	background-size: cover;
}
#wrapper #wrap-inner #contents3 {
	background: url(img/bg3.jpg) no-repeat 50% 0 fixed;
	background-size: cover;
}
#wrapper #wrap-inner #contents5 {
	background: url(img/bg5.jpg) no-repeat 50% 0 fixed;
	background-size: cover;
}
#wrapper #wrap-inner #contents7 {
	background: url(img/bg7.jpg) no-repeat 50% 0 fixed;
	background-size: cover;
}
/* ** */}
JavaScript

$(function () {
contents = $("#wrap-inner");
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(6).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();
}
});
});

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


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

関連リンク

CSSだけでパララックスレイアウト

  • カテゴリー:Labs