今日の人気記事

まだデータがありません。

水平・垂直スクロースのシングルページを実装「fullPage.js」

当ページのリンクには広告が含まれています。

スポンサーリンク

水平・垂直スクロースのシングルページを実装するプラグイン「fullPage.js」を紹介します。

jQueryプラグイン「fullPage.js」

シングルページとは、1ページで完結したキャンペーンサイトなどに使われるアレです。

このプラグインを使えば、1ページごとにスクロールを制御することができ、スライドや紙芝居?のようなシングルページを作成することができます。

しかも、縦の垂直スクロースだけでなく、左右の水平スクロールに対応しているので、おすすめです。

スポンサーリンク

それではデモページをスクロールしてみてください。

「fullPage.js」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)