水平・垂直スクロースのシングルページを実装「fullPage.js」
当ページのリンクには広告が含まれています。
スポンサーリンク
水平・垂直スクロースのシングルページを実装するプラグイン「fullPage.js」を紹介します。
jQueryプラグイン「fullPage.js」
シングルページとは、1ページで完結したキャンペーンサイトなどに使われるアレです。
このプラグインを使えば、1ページごとにスクロールを制御することができ、スライドや紙芝居？のようなシングルページを作成することができます。
しかも、縦の垂直スクロースだけでなく、左右の水平スクロールに対応しているので、おすすめです。
スポンサーリンク
それではデモページをスクロールしてみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="fullPage.jsのデモでーす。">
<title>fullPage.js - jQueryプラグイン</title>
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="jquery.fullPage.js"></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['red', 'green', 'blue', 'orange', 'purple']
});
});
</script>
<style>
h1, p {
text-align: center;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section active" id="section0">
<h1>fullPage.js のデモでーす。</h1>
<p>ページをスクロールしてみてください。</p>
</div>
<div class="section" id="section1">
<div class="slide "><h1>右に</h1></div>
<div class="slide active"><h1>左右の矢印をクリック</h1></div>
<div class="slide"><h1>左に</h1></div>
<div class="slide"><h1>くるくるまわるよぉー</h1></div>
</div>
<div class="section" id="section2"><h1>タイトル</h1></div>
<div class="section" id="section3"><h1>タイトル</h1></div>
<div class="section" id="section4"><h1>タイトル</h1></div>
</div>
</body>
</html>
スポンサーリンク