【jQuery Tips】スクロールで画像がめくれる動きを表現する : アシアルブログ

201506/02

【jQuery Tips】スクロールで画像がめくれる動きを表現する

カテゴリ :: デザイン・UI
タグ :: JavaScript; jQuery; Monaca; HTML5; デザイン

こんにちは、生形です。
最近、嬉しいことにアシアルの書籍の売れ行きが軒並み好調です。

6月に入り、弊社岡本が執筆した「イラストでよくわかるPHP」が、Kindleの月替わりセール対象商品になりました。
なんと699円（紙の本の価格の64%OFF！）で購入いただけます。
現在、アマゾンWebプログラミングカテゴリの売れ筋ランキング１位です！
セールは今月いっぱいですので、ぜひこの機会に。

つづいて、私の執筆した「スラスラわかるJavaScript」に増刷がかかりまして、
個人的な目標の1万部まであと少しというところまで来ました！
セミナー等でお会いした方には本を買いましたよと声をかけて頂くこともあり、大変ありがたく思っております。
購入者特典としてjQueryのTips集を翔泳社のスラスラわかるシリーズ公式サイトで配布していますので、
ご存じなかった方はぜひダウンロードしてみて下さい！

さて、今日はこのTips集から、「スクロールで画像がめくれる動きを表現する」を紹介します。
完成イメージは、こちらのページを見て下さい。
画像が２枚重ねて配置されていて、ページをスクロールすると前面の画像がめくれて背面の画像が見えるようになります。

コードの量はほんの少しだけで、とても簡単です。
それでは見てみましょう。

スクロールで画像がめくれる動きを表現する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="over"><img src="images/flower1.jpg"></div>
<div id="under"><img src="images/flower2.jpg"></div>
</body>
</html>

style.css

body {
/* スクロールバーを表示するために、高さを多く取っておく */
height: 5000px;
}
/* 画像の親要素 */
div {
/* スクロールしても画像をウィンドウ左上に固定表示する設定 */
position: fixed;
left: 0px;
top: 0px;
height: 600px; /* 画像と同じ高さを設定 */
}
div img{
height: 600px;
}
/* 背面の要素を囲むdiv要素 */
#under {
z-index: 1; /* 背面に表示 */
}
/* 前面の要素を囲むdiv要素 */
#over {
z-index: 2; /* 前面に表示 */
overflow: hidden; /* 要素からはみだした部分は非表示 */
}

main.js

$(function(){
$(window).on("scroll", function() {
// スクロール量を取得
var scroll = $(window).scrollTop();
// 画像の高さを取得
var height = $("#over img").height();
// 前面のdiv要素の高さを削る
$("#over").css("height", height-scroll);
});
});

index.htmlには、画像を囲む<div>要素が２つあります。
これがそれぞれ、前面と背面に表示している画像です。
初期状態では、<div>要素と画像の高さはどちらも600pxに指定しています。
ページをスクロールすると、スクロールした分だけ前面の<div>要素の高さを低くしています。
仮に200px分スクロールした場合は、<div>要素の高さは400pxになります。
このように、スクロールと連動して上に重なっている要素の高さを変化させることで、あたかも画像が捲れ上がっていくように見せることができます。