AMP で下スクロールで非表示・上スクロールで再表示

amp-fx-collectionでスクロールに応じた非表示と表示のエフェクトを実装

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

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

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

このスクロールに応じた動きは、AMP でも実装できます。

しかも、ものすごく簡単に。

その実装方法の紹介です。

動作

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

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

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

amp-fx-collection

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

amp-fx-collection

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

これまで主に 2 つのエフェクトを実装できました。

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

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

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>

属性を追加

次に、ヘッダーやボトムナビなどの HTML に対し、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

参考amp-fx-collection / 0.1 / scroll-toggle.js