amp-fx-flying-carpet
空飛ぶじゅうたん？バカ何言ってんだと、最初リファレンス見てたら思いましたよ
思いますよね！？
とはいえ、どんなもの？ってのを実際に見ると、あー、うん。空飛ぶじゅうたんでええわもう
ってなっちゃいました(๑´ڡ`๑)ｳｪﾋﾋ
プラグインの読み込み
amp-fx-flying-carpetを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。
<script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>
基本構文と動作
どんな書き方でどんな動きすんのかを。まず簡単なものを。
<div style="height:700px">上の要素</div> <amp-fx-flying-carpet height="300px"> <amp-img src="/common/img/illust/1.jpg" width="300" height="300" layout="responsive"></amp-img> </amp-fx-flying-carpet> <div style="height:700px">下の要素</div>
まぁソースだけじゃわかんないですよね。
実際に見たら、ああーｗこれか！ってなる人も多いのではないでしょうか。
ルールについて
で、これ配置するだけじゃダメなんですよ。
ちょっと面倒くさいルールとして以下があります。
-
配置する場合は、画面上部から75%のスキマを開ける必要がある
他要素を入れたりして稼いでねって事ですね -
スクロールするとき、その頂点が最後のビューポートの頂点に到達するか、または上になるように配置する必要があります。
直訳で詳しく書いてないので・・・正直なんとも言えないですがこれを設置して、この要素の下にある程度の高さのコンテンツを
配置する必要があります。って所でしょうか・・・正直謎です。
と２点の大事なルールがあって、正直２番目はよくわかんねな状態ですが
１番目に注意、画面上部から75%って事なので、
ブラウザサイズを変更できるPCサイトでは若干縛られる感じがします。
この要素がでるまでに確定できる高さが確保できれば問題なさそうですが・・・
所謂ちょっと動的にかわっちゃうページなんかでは非常に使い悪い感じがします。
もちろんスマホも機種によって変わってきますし、まぁまぁ眺めのコンテンツの真ん中に配置するのが一番安全ですね。
