[JS]極シンプルなマークアップで、コンテンツを横にスライドさせナビゲーションを表示するスクリプト -Slideout.js

Post on:2015年3月9日

非常にシンプルなマークアップで、コンテンツをアニメーションで横にスライドさせ、ナビゲーションを表示するスクリプトを紹介します。

jQueryなど他のスクリプトは不要で、4KBの超軽量スクリプトです。

デモのアニメーション

Slideout.js
Slideout.js -GitHub

Slideout.jsのデモ

スクリプトはスマホやタブレットなどモバイル用ですが、デスクトップでも動作します。

サイトのキャプチャ

デモページ

対応ブラウザ

  • Chrome (IOS, Android, desktop)
  • Firefox (Android, desktop)
  • Safari (IOS, Android, desktop)
  • Opera (desktop)
  • IE 10+ (desktop)
サイトのキャプチャ

デモページ

ダウンロードファイルのデモでは、メソッドやオプションなどさまざまな情報が含まれています。

サイトのキャプチャ

ダウンロードファイルのデモ

Slideout.jsの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="index.css">
</head>
<body>
  ...
  <script src="slideout.min.js"></script>
</body>

Step 2: HTML

ナビゲーション（#menu）とコンテンツ（#panel）を実装します。
idは変更可能です。

<nav id="menu">
  ナビゲーション
</nav>

<main id="panel">
  コンテンツ
</main>

Step 3: JavaScript

オプションを定義し、スクリプトを実行します。

<script>
  var slideout = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
  });
</script>

sponsors

top of page

©2024 coliss