【Labs】ホイールの回転で要素間を移動するパララックスレイアウト - web design lab
home > labs > 【Labs】ホイールの回転で要素間を移動するパララックスレイアウト

9月更新・前月(8月)の人気記事トップ10 09/02/2024

  1. ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
  2. ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
  3. ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
  4. ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
  5. (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
  6. ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
  7. ( 09 ↑) 【Mac】Safariでソースコードを見る方法
  8. ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
  9. ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
  10. (圏外↑) 【GIMP】レイヤーをロック
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村
【Labs】CSSだけでパララックスレイアウト 【Labs】スクロールでCSS効果の適用

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


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

こんにちは（・∀・）

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

前回ご紹介しました【CSS3】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サイトを簡単に作ることができるのでオススメです。

関連リンク

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

【Labs】CSSだけでパララックスレイアウト 【Labs】スクロールでCSS効果の適用
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村