nav要素

カテゴリー フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ
この要素が予想される場所 フローコンテンツが予想される場所
コンテンツモデル フローコンテンツ

nav要素は、「主要なナビゲーション」を主に表します。

aside要素

カテゴリー フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ
この要素が予想される場所 フローコンテンツが予想される場所
コンテンツモデル フローコンテンツ

aside要素は、「コンテンツに関係はしているものの切り離せる内容」を表します。
典型的な用途に、サイドバー、補足記事、広告などがあります。

パララックス用のjQueryプラグインの1つである「scrollorama.js」の使用方法のメモ

パララックス効果を出せるjQueryプラグインの1つである「scrolldeck.js」の使用方法のメモです。

ファイルをダウンロード

以下サイトからファイルをダウンロードします。

http://johnpolacek.github.io/scrolldeck.js/

公式サンプル

http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

読み込むjavascript

「scrolldeck.js」を使用するために下記javascriptを読み込みます。

上部ナビゲーションの設定

下記記述を追加

ナビゲーションのマークアップ

そのまま使う場合は下記を指定(id名、class名は任意のものに変更可能ぽい)

  1. 「id=”test-header”」で囲う
  2. アンカーリンク設定
  3. aタグに「class=”nav-button”」を指定

順番に表示

下記のようにする。

  1. 「class=”slide”」で囲む
  2. 「class=”animate-build”」と「data-build=”番号”」を指定

両端からフェードイン

下記のようにする。

  1. 任意のid名をつける
  2. 「class=”slide”」で囲む
  3. 「class=”animate-in”」と「data-animation=”space-in”」を指定

フェードイン

下記のようにする。

  1. 任意のid名をつける
  2. 「class=”slide”」で囲む
  3. 「class=”animate-in”」と「data-animation=”fade-in”」を指定

右からスライドイン

下記のようにする。

  1. 任意のid名をつける
  2. 「class=”slide”」で囲む
  3. 「class=”animate-in”」と「data-animation=”fly-in-right”」を指定

左からスライドイン

下記のようにする。

  1. 任意のid名をつける
  2. 「class=”slide”」で囲む
  3. 「class=”animate-in”」と「data-animation=”fly-in-left”」を指定