[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide

Facebookのモバイル版のように、ボタンやリンクをクリックするとページ全体を横にスライドし、隠されたコンテンツやリンク先のページを表示するjQueryのプラグインを紹介します。

サイトのキャプチャ

PageSlide -GitHub

PageSlideのデモ

まずは、デモからご紹介。

デモのキャプチャ

デモ

3つのデモがあります。
一つ目は青いボタンをクリックすると右にスライドし、リンク先のページを表示します。

デモのキャプチャ

デモ

二つ目は左にスライドし、隠れていたコンテンツを表示します。

デモのキャプチャ

デモ

三つ目も左にスライドし、iframe内にコンテンツを表示します。

デモのキャプチャ

デモ

PageSlideの使い方

外部ファイル

スタイルシートをhead内に記述します。

<link rel="stylesheet" type="text/css" href="jquery.pageslide.css">

ページの下(</body>の上)にスクリプトを記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pageslide.min.js"></script>

JavaScript

PageSlideさせる要素を指定します。

<script type="text/javascript">
    $('a').pageslide();
</script>

開く時は、下記のようになります。

<script type="text/javascript">
    $.pageslide({ href: '#some-element' });
    $.pageslide({ href: 'some-page.html' });
</script>

閉じる時は、下記のようになります。

<script type="text/javascript">
    $.pageslide.close();
</script>

スクリプトのオプション

オプションではスライドのスピードや方向などを設定できます。

speed
スライドするスピード。
direction
スライドの方向。
modal
リンク先をモーダルで開きます。
true時は明示的に閉じる必要があります。
iframe
リンク先をiframeで開きます。
href
リンク先に「javascript:」を使用した際のリンク先。

top of page

©2017 coliss