menu
menu

jQueryでパララックスエフェクトなレイアウト | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook19
  • はてなブックマーク4
  • Google+4
  • Pocket0
  • Twitter0

jQueryでパララックスエフェクトなレイアウト

  • Labs

jQuery

こんにちは(・∀・)

 今回はjQueryでパララックスエフェクトなレイアウトサンプルのご紹介です。今回ご紹介するサンプルはボタン操作とマウスホイールの回転のどちらでも要素間の移動ができるようになりました。

 コンテンツの高さも画面のサイズに応じて可変になります。

サンプルデモ

 サンプルデモはこちら!


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.11.0/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 Stylesheet-->
<link rel="stylesheet" href="style.css">
<!--Require JavaScript-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/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">
<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>
</html>
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(bg1.jpg) no-repeat 50% 0 fixed;
	background-size: cover;
}
#contents #main #content2 {
	background: url(bg2.jpg) no-repeat 50% 0 fixed;
	background-size: cover;
}
#contents #main #content3 {
	background: url(bg3.jpg) no-repeat 50% 0 fixed;
	background-size: cover;
}
#contents #main #content4 {
	background: url(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.7em;
}
.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.75em;
}
.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.75em;
}
.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");
});

関連リンク

 CSSでパララックスエフェクトなレイアウト

  • カテゴリー:Labs
  • facebook19
  • はてなブックマーク4
  • Google+4
  • Pocket0
  • Twitter0