jtk

AMP

AMPでアニメーション `amp-fx-collection`

AMP

AMP サイトでアニメーションを実装する機会がありましたが、amp-animation だったり、amp-fx-collection や amp-story というコンポーネントまであり、こんがらがったのでまとめをしておきます。 amp-animation とは Web Animations APIに依存した、JSON で…

AMP amp-position-observer と amp-animation

AMP

AMP の amp-position-observer と amp-animationを使って、スクロール量に応じてナビゲーションの現在地のスタイルを変更するというのをやってみる。 結果 See the Pen AMP amp-position-observer & amp-animation by jotaki (@yuheijotaki) on CodePen. つ…

AMP 雑感

AMP

AMP を少し触ってみたので所感をメモしておきます。 おおまかな制約 HTML 基本的に HTML のタグ要素は使える。 使えるタグは AMP HTML Tag Addendum に記載。 <img> 要素は <amp-img> で対応する。width, height 属性は必須。 CSS CSS はインラインで記述。 基本的なプロパ</amp-img>…