メインコンテンツまで移動する

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

  • 公開日
  • 更新日

Akira Web クリエイター

動作

下にスクロールすると隠れる。上にスクロールすると表示する。こんな動きをするヘッダーを見かけます。

このスクロールに応じた動きは、AMP でも簡単に実装できます。その実装方法の紹介です。

まず、実際の動作をご覧ください。高さ 120px 、背景色が赤のヘッダーを作っています。下にスクロールするとヘッダーが上に隠れ、上にスクロールすると現れます。

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

amp-fx-collection

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

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

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

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

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

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

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

実装方法

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

ライブラリの読み込み

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

<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-top と float-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 エラーは出ません。例えば、float-in-top を追加した要素の id が header-wrap で overflow: hidden を指定していない場合は、以下の警告が出ます。

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

これで実装は完了です。

オプション

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

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

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

参考：amphtml/scroll-toggle.js at 444fc388a7c5f3991a5ade443af0c7992df89c88 · ampproject/amphtml

フォローする