お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

amp-fx-parallax

パララックスです。視差効果を出そうぜ!!!って事ですね
下へスクロールするととある要素の中が上にすーっと動いていくみたいな
で、記事書いている段階では今試験的な感じで上手く動きませんでした。

プラグインの読み込み

amp-fx-parallaxを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。

<script async custom-element="amp-fx-parallax" src="https://cdn.ampproject.org/v0/amp-fx-parallax-0.1.js"></script>

基本構文と動作

どんな書き方でどんな動きすんのかを。まず簡単なものを。

<amp-img amp-fx-parallax="0.5" height="50vh" layout="fixed-height" src="hero.jpg"></amp-img>

各種プロパティについて

amp-fx-parallax スクロールするときに使用する要素に付与します
数字を指定することで動作が変わってきます。
1より大きい数値を指定
ユーザーがページを下にスクロールする時に、パララックス要素を上にスクロールします。
1より小さい数値を指定
ユーザーがページを下にスクロールする時に、パララックス要素を上にスクロールします。
  1. 配置する場合は、画面上部から75%のスキマを開ける必要がある
    他要素を入れたりして稼いでねって事ですね
  2. スクロールするとき、その頂点が最後のビューポートの頂点に到達するか、または上になるように配置する必要があります。
    直訳で詳しく書いてないので・・・正直なんとも言えないですがこれを設置して、この要素の下にある程度の高さのコンテンツを
    配置する必要があります。って所でしょうか・・・正直謎です。

と2点の大事なルールがあって、正直2番目はよくわかんねな状態ですが
1番目に注意、画面上部から75%って事なので、
ブラウザサイズを変更できるPCサイトでは若干縛られる感じがします。
この要素がでるまでに確定できる高さが確保できれば問題なさそうですが・・・
所謂ちょっと動的にかわっちゃうページなんかでは非常に使い悪い感じがします。
もちろんスマホも機種によって変わってきますし、まぁまぁ眺めのコンテンツの真ん中に配置するのが一番安全ですね。