フェードやパララックスをAMPブログに実装できるamp-fx-collection

やっぱりAMPはすごく面白いですね。
実はいろんなエフェクトが、簡単に付けられるようになっています。
本当に簡単。

今回はスクロールによるインタラクションを、実装する方法を紹介します。
公式のドキュメントも英語ですがありますので、こちらも御覧ください。
amp-fx-collection – AMP

amp-fx-collectionコンポーネントを使う

これらの動きを実装するには、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>

☝️訳あって、このsrc=以降のリンクをシングルクォートで囲んでいます。
正式にはダブルクォートになっています 🙏

amp-fx-collection コンポーネント一つで以下のようなスクロールエフェクトを実装することが可能です。

  1. パララックス
  2. フェード・イン
  3. フェード・イン・スクロール
  4. フライ・イン系
  5. amp-fxの組み合わせはダメ
  6. まとめ

パララックス

このブロックは以下のようなパラメータを追加するだけで実現しています。

<div amp-fx="parallax" data-parallax-factor="1.1">
  テキストやイメージ
<div>

amp-fx=“parallax”

amp-fx="parallax"
エフェクトの種類を指定します。

data-parallax-factor=""

要素がスクロールよりもどれだけ「速くor遅く」動かすかの設定値です。
これが少しトリッキーです。
data-parallax-factor="1.5"
1以上の数値だと指定したブロックが上方向にスクロールします。
つまり、スクロールと逆の動きをします。
また、数値を上げれば上げるほど、スピードが上がります。

data-parallax-factor="1"
これだとスクロールと同じスピードになります。
つまり、ノーマル状態と一緒。

data-parallax-factor="0.5"
1以下の数値だと、下方向にスクロールします。
つまり、スクロールしている方向と同じ方向に移動していきます。

フェード・イン

このブロックは以下のようなパラメータを設定することでfade-inしています。

<div amp-fx="fade-in" data-duration="1000ms" data-margin-start="60%">

amp-fx=“fade-in”

amp-fx="fade-in"
こちらはparallaxと同じように、エフェクトの種類を指定します。

data-duration=""

fade-inのアニメーションが、始まってから終わるまでの時間を設定します。
持続時間ですね。
ミリ秒で設定できます。

data-easing=""

イージングを細かく設定することが可能です。
data-easing="cubic-bezier(0.40, 0.00, 0.40, 1.00)"
フェードの詳細を作り込みたい場合は便利かもしれません。

デフォルトではease-inの設定がされます。

data-margin-start=""

アニメーションが発火するタイミングを設定できます。
60%に設定しているので、中央よりちょっと上に、ブロック位置が来たときに、アニメーションされますね。
デフォルトでは5%に設定されています。

フェード・イン・スクロール

このブロックはこんなパラメータを設定しています。

<div amp-fx="fade-in-scroll" data-duration="1000ms">

amp-fx=“fade-in-scroll”

amp-fx="fade-in-scroll"
スクロール量に合わせて、不透明度の量が変化する動きを調整することができます。
例えば、透過して色の薄い画像がスクロールするほど濃くなってきて見えるようになるようなイメージです。

data-margin-start=""

フェードのアニメーションを開始する位置を指定できます。
デフォルトでは0%、つまり、下端に指定ブロックが到達したときから開始します。

data-margin-end=""

アニメーションを終わりにする位置を指定できます。
すべてのfadeのかかったものが完全に表示されるまでのスクロール位置です。

デフォルトの値は50%、つまり指定ブロックが画面の中央に到達したときに完了します。

data-repeat=""

デフォルト設定では、アニメーションが実行されるのはそのエリアが表示される一度だけです。
スクロールが戻るたびにアニメーションさせるにはこの値を設定します。

フライ・イン系

このブロックは以下のようなパラメータを設定しています。

<div amp-fx="fly-in-bottom" data-fly-in-distance="10%" data-margin-start="60%">

amp-fx=“fly-in-bottom”

amp-fx="fly-in-bottom"
ここでアニメーションの種類を設定できます。

  • fly-in-bottom
  • fly-in-left
  • fly-in-right
  • fly-in-top

また、これに上で説明したfade-inなども組み合わせることができます。

data-fly-in-distance=""

動きの大きさです。
たとえば90%に指定すると、画面の上方まで移動します。

amp-fxの組み合わせはダメ

どうやらエラーのようです。
amp-fx="fly-in-bottom fade-in"でやってみたら、AMPバリデーションで、エラーが表示されてしまいました。
複数組み合わせたら面白い動きできそうだなぁなんて思っていたので、ちょっと残念。
それとも、組み合わせできるパターンもあるのかな?

まとめ

当初、インタラクションなんて実装できないと思っていました。
そういうのを捨てるからこそ、高速なんだと。
しかし、いい意味で裏切られました!
普通に ウェブサイトを構築できちゃう コンポーネントが、たくさん提供されてるんですよね。
それも、超簡単に実装できました。
いやぁ、すごいです。

このコンポーネントで、基本的なインタラクションは抑えられると思います。

まだまだ、今後面白いコンポーネントが登場しそうなのも楽しみ。
とっても期待しています。

#amp
#interaction
Chaos boy

テーマは「脱・思考停止」。
コメントはtwitterでお気軽に。