フェードやパララックスを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>

amp-fx-collectionコンポーネント で、以下のようなスクロール・エフェクトを実装することが可能です。 しかも、めっちゃ簡単です。

パララックス

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

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

data-parallax-factor=""

要素がスクロールよりもどれだけ「速くor遅く」動かすかの設定値です。 これが少しトリッキーです。

data-parallax-factor="1.5" 1以上の数値だと指定したブロックが上方向にスクロールします。 つまり、スクロールと逆の動きをします。 また、数値を上げれば上げるほど、スピードが上がります。

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

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

フェード・イン

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

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

data-margin-start=""

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

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のインタラクションは簡単

当初、インタラクションなんて実装できないと思っていました。 そういうのを捨てるからこそ、高速なんだと。

しかし、いい意味で裏切られました。 普通にウェブサイトにインタラクションをインストールできるコンポーネントが、たくさん提供されてるんですよね。 しかも、超簡単に実装できます。

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