AMP でヘッダーなどを下スクロールで非表示・上スクロールで再表示

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

下にスクロールすると隠れる。上にスクロールすると表示する。

こんな動きをするヘッダーをよく見ます。

このスクロールに応じた動きは、AMP でも実装できます。しかも、ものすごく簡単に。

その実装方法をご紹介します。

動作

まず、実際の動作をご覧ください。高さ 120px 、背景色が赤のヘッダーを作っています。

下にスクロールするとヘッダーが上に隠れ、上にスクロールすると現れます。

また、ボトムナビに指定することも可能です。こちらは下にスクロールするとボトムナビが下に隠れます。

amp-fx-collection

スクロールに応じた非表示・再表示を実装するために使うのが、amp-fx-collection です。

amp-fx-collection は、スクロールに応じたエフェクトを簡単に実装できる AMP コンポーネント。

主に 2 つのエフェクトを実装するために使用します。

  • スクロールに応じたパララックス
  • スクロールに応じたフェードイン(全部で 6 種類)

どのようなエフェクトかは、amp-fx-collection : AMP by Example で確認できます。

複数のエフェクトを同時に指定できるほか、オプションでカスタマイズができます。ある程度のエフェクトは簡単に実装が可能です。

この amp-fx-collection を使えば、今回ご紹介するスクロールに応じて消える・表示するエフェクトも実装できます。

実装方法

実装は 3 ステップで完了します。

ライブラリの読み込み

amp-fx-collection を使うには、ライブラリの読み込みが必要です。

<head></head> 内に script タグを追加し、ライブラリを読み込みます。

<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>

amp-fx 属性を追加

次に、ヘッダーやボトムナビなどの HTML に対し、amp-fx 属性を追加します。

属性値は、下記のいずれかです。

用途と amp-fx 属性値の組み合わせ
用途 属性値
上に隠す float-in-top
下に隠す float-in-bottom

ヘッダーには float-in-top 。ボトムナビには float-in-bottom を使うことになると思います。

ヘッダーであれば、こんな HTML です。ラッパーに amp-fx 属性を追加します。

<div amp-fx="float-in-top">
  ヘッダーの HTML
</div>

CSS を指定

amp-fx-collection は、基本的に CSS を指定せずにパララックスやフェードインのエフェクトを実装できます。

しかし、float-in-topfloat-in-bottom を使う時は、3 つの CSS の指定が必須です。

  • overflow: hidden
  • position: fixed
  • float-in-top を使う場合は、top: 0
  • float-in-bottom を使う場合は、bottom: 0

ヘッダーに float-in-top を使う場合は、こんな CSS です。

.example {
  overflow: hidden;
  position: fixed;
  top: 0;
}

もし、1 つでも指定を忘れた時はエフェクトは動かず、デベロッパーツールのコンソールタブに下記のような警告が出ます。ただし、AMP エラーは出ません。

FX element must have `overflow: hidden` [#header-wrap].

※注)float-in-top を追加した要素の id が header-wrap で、overflow: hidden の指定をしていないケースの警告です。

これで実装は完了です。

オプション

執筆時点で、float-in-topfloat-in-bottom にオプションはありません。

尚、デフォルトの設定は下記のとおりです。

  • サイト最上部より 36px 以上スクロールした地点からエフェクトが発動(36px 未満では要素は必ず表示される)
  • 下へのスクロール量が 80px を超える場合に非表示のエフェクトが発動
  • 上へのスクロール量が 20px を超える場合に再表示のエフェクトが発動
  • transition-timing-function は ease
  • transition-duration は 300ms

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。