Blog

カーテン、というかシャッター?みたいにページが切り替わるJS

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

 

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

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

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

 

DEMO

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

Victa/curtain.js – GitHub

 

curtain.jsの使用方法

 

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

jQueryに関しては、

でもいいと思います。

ちなみに、

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

 

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

 

あとはHTMLの方に、

とするだけです。

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

 

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

 

一番最後のページに、

と記述していますが、

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

position: fixed;

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

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

 

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

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

 

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ