そんなjqueryのプラグインを紹介したいと思います。

実際に使うとしたら、ポートフォリオとかキャンペーンサイトとかそのようなサイトで使えるのかなぁと思います。

企業のサイトでも使ってみてもいいと思いますが、クライアントがNGを出すかもしれません。

実際、使ってみましたので、 そのサンプルをご覧下さい。

DEMO

プラグインのダウンロードはこちらから

Victa/curtain.js – GitHub

curtain.jsの使用方法

 

１．まずはjQueryとプラグイン、cssを読み込みます。 (ちなみにHTML5仕様で読み込むソースになっております。)

JavaScript

<script src="js/jquery.js"></script> <script src="js/curtain.js"></script> <link rel="stylesheet" href="curtain.css">

1 2 3

<script src="js/jquery.js"></script>   <script src="js/curtain.js"></script> <link rel="stylesheet" href="curtain.css">

jQueryに関しては、

XHTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

でもいいと思います。

ちなみに、

XHTML

<script src="js/curtain.js"></script>

1	<script src="js/curtain.js"></script>

は、の前でいいと思います。

 

いろいろとオプションがあるのですが、 今回は下記のように入れました。

XHTML

<script src="js/curtain.js"></script> <script> $(function(){ $('.curtains').curtain({ scrollSpeed: 450, //スクロールのスピード controls: '.menu', //次へ、戻るボタン curtainLinks: '.curtain-links' //コンテンツへのリンク }); }); </script>

1 2 3 4 5 6 7 8 9 10

<script src="js/curtain.js"></script> <script>     $(function(){        $('.curtains').curtain({            scrollSpeed: 450, //スクロールのスピード            controls: '.menu', //次へ、戻るボタン            curtainLinks: '.curtain-links' //コンテンツへのリンク        });     }); </script>

 

あとはHTMLの方に、

XHTML

<ul class="curtains"> <li>・・・・</li> <!-- ひとつひとつのコンテンツ --> <li>・・・・</li> <li>・・・・</li> </ul>

1 2 3 4 5

<ul class="curtains"> <li>・・・・</li> <!-- ひとつひとつのコンテンツ --> <li>・・・・</li> <li>・・・・</li> </ul>

とするだけです。

liの中は、もう自由に記述しちゃってOKです。

 

今回はグロナビみたいなものは設置していませんが、 設置可能です。

 

一番最後のページに、

XHTML

<p class="mb20"> <a href="#myfirstpanel" class="curtain-links">最初のコンテンツに戻る</a><br> <a href="#mysecondpanel" class="curtain-links">2枚目のコンテンツに戻る</a><br> <a href="#mythirdpanel" class="curtain-links">3枚目のコンテンツに戻る</a><br> <a href="#myfourthpanel" class="curtain-links">4枚目のコンテンツに戻る</a><br> </p>

1 2 3 4 5 6

<p class="mb20">             <a href="#myfirstpanel" class="curtain-links">最初のコンテンツに戻る</a><br>             <a href="#mysecondpanel" class="curtain-links">2枚目のコンテンツに戻る</a><br>             <a href="#mythirdpanel" class="curtain-links">3枚目のコンテンツに戻る</a><br>             <a href="#myfourthpanel" class="curtain-links">4枚目のコンテンツに戻る</a><br>         </p>

と記述していますが、

これをメニューっぽく装飾して、

position: fixed;

でどこかにおいちゃえばOKかと思います。

ただ、 class=”curtain-links”とつけないといけないようですので御注意を。

 

次へ、戻るボタンについては、

XHTML

<ul class="menu"> <li><a href="#up">↑</a></li> <li><a href="#down">↓</a></li> </ul>

1 2 3 4

<ul class="menu">     <li><a href="#up">↑</a></li>     <li><a href="#down">↓</a></li> </ul>

でOKで、同じように好きな位置に置くといいと思います。