まだデータがありません。
水平・垂直スクロースのシングルページを実装「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>
スポンサーリンク