はじめに
最近、スクロール時にコンテンツを引っ張り上げるインターフェースを見かける事が多くなって来ましたので、pullupscrollを試してみます。
2014年04月05日 10時39分
最近、スクロール時にコンテンツを引っ張り上げるインターフェースを見かける事が多くなって来ましたので、pullupscrollを試してみます。
作業の前提条件は、下記のとおりです。
| ソフトウエア | バージョン |
|---|---|
| OS | Windows 7 Ultimate 32bit |
| Cygwin | Setup Version 2.831 |
設置に必要なアーカイブをダウンロードし、解凍します。
$ cd /tmp/demo $ wget -q https://github.com/ericwenn/pullupscroll/archive/master.zip $ unzip -q master.zip $ rm -f master.zip $ mv pullupscroll-master pullupscroll
pullup.cssを指定します。
<link href="pullupscroll/pullup.css" rel="stylesheet">
pullup.jsを指定します。 追加します。
<script src="pullupscroll/pullup.js"></script>
引っ張り上げる対象となるコンテンツを指定します。
<section class="wrapper"> <div class="box" id="box1">Box01</div> <div class="box" id="box2">Box02</div> </section>
pullupscrollのロードを行うJavaScriptを追加します。
<script>
$(function() {
$("section.wrapper").pullupScroll(".box");
});
</script>
ページを表示し、スクロールすると後ろのコンテンツが遅れて引き上げられます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>051</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="pullupscroll/pullup.css" rel="stylesheet">
<style>
body { background:#888; }
.box { height: 200px; width: 300px; }
#box01 { background: #56638f; }
#box02 { background: #ddded3; }
#box03 { background: #f8dc85; }
#box04 { background: #dfbc9f; }
#box05 { background: #727b69; }
#box06 { background: #9f945f; }
#box07 { background: #ff9c77; }
#box08 { background: #d18047; }
#box09 { background: #c19570; }
#box10 { background: #56638f; }
#box11 { background: #ddded3; }
#box12 { background: #f8dc85; }
#box13 { background: #dfbc9f; }
#box14 { background: #727b69; }
#box15 { background: #9f945f; }
#box16 { background: #ff9c77; }
#box17 { background: #d18047; }
#box18 { background: #c19570; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<section class="wrapper">
<div class="box" id="box01">Box01</div>
<div class="box" id="box02">Box02</div>
<div class="box" id="box03">Box03</div>
<div class="box" id="box04">Box04</div>
<div class="box" id="box05">Box05</div>
<div class="box" id="box06">Box06</div>
<div class="box" id="box07">Box07</div>
<div class="box" id="box08">Box08</div>
<div class="box" id="box09">Box09</div>
<div class="box" id="box10">Box10</div>
<div class="box" id="box11">Box11</div>
<div class="box" id="box12">Box12</div>
<div class="box" id="box13">Box13</div>
<div class="box" id="box14">Box14</div>
<div class="box" id="box15">Box15</div>
<div class="box" id="box16">Box16</div>
<div class="box" id="box17">Box17</div>
<div class="box" id="box18">Box18</div>
</section>
</div><!-- row -->
</div><!-- container -->
<script src="jquery-1.10.2.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="pullupscroll/pullup.js"></script>
<script>
$(function() {
$("section.wrapper").pullupScroll(".box");
});
</script>
</body>
</html>