Web Animations APIに依存した、JSON で定義してアニメーションを実行する機能。
公式の例:
<amp-animation layout="nodisplay"> <script type="application/json"> { // Timing properties ... "animations": [ { // Animation 1 }, ... { // Animation N } ] } </script> </amp-animation>
これは 前に 少し触ったやつですね。
amp-fx-collection
とはHTML 内の属性指定にて要素のフェードイン、パララックスなどのプリセットのエフェクトを実現できるコレクション。
公式の例:
<h1 amp-fx="parallax" data-parallax-factor="1.5"> A title that moves faster than other content. </h1>
これを実際に使用することになりそうなので、少し詳しく書いておきます。
... <script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script> </head> <body> <!-- `01`と`02` のレイヤー背景にパララックス効果 --> <div class="bg_layer"> <div class="bg_layer_01" amp-fx="parallax" data-parallax-factor="1.4 "></div> </div> <div class="bg_layer"> <div class="bg_layer_02" amp-fx="parallax" data-parallax-factor="1.2" ></div> </div> <main> <!-- 左から右へスライドイン --> <div class="img_object" amp-fx="fly-in-left" data-fly-in-distance="50%" data-duration="1500ms" data-easing="ease-out" > <amp-img></amp-img> </div> <!-- 下から上にフェードイン --> <div class="txt_object" amp-fx="fade-in fly-in-bottom" data-fly-in-distance="10%" data-duration="1000ms" data-easing="ease-out" > <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </main> ...
種類やオプションは 公式 が詳しく、デモは AMP by Example が豊富です。
留意事項などに関しては、
基本的にスクロールされた領域を自動で判定してくれた上で各種アニメーションを行ってくれる。(その領域にスクロールされたらアニメーション開始)
amp-fx-collection
を指定する HTML 要素に対して、CSS 側で position: absolute;
の指定などしている際に思い通りに動かない場合がある。
上記のサンプルコードの .bg_layer
に関して言うと、下記のような CSS 指定の場合、アニメーションが動作しました。
.bg_layer { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; } .bg_layer_01 { width: 100%; height: 100%; background: url(bg_layer_01.png) repeat-y left 50% top 0 / 1600px auto; }
※ラッパーの .bg_layer
に amp-fx-collection
オプションを指定するとうまく動作しなかった
amp-story
とはInstagram のストーリーなどのような、
などに特化した機能をもつコンポーネントのこと。
今の所、試験運用コンポーネント 。
公式の概要
構成のイメージとしては AMP ストーリーのパーツについて の図が分かりやすかったです。
この amp-story
のコンポーネントの中で使用できるアニメーションはまた別で(併用可能?)こちら に一覧があります。
これまでの 2 つのコンポーネントとは違い、構成の枠組み的なコンポーネントという認識になったので今回は使用は見送りました。
amp-animation
amp-fx-collection
amp-story