メディアサイトにおいてよくある動きはAMPで実装できるのか調査

AMP

Webサイトにおいてよくある動きはAMPで実装できるのか調査しました。

スムーススクロール

ページ内リンクで遷移する際にゆっくりとスクロールできるかどうか。
目次でよく使われる。

結論：実装できる

記述方法

<button on="tap:target.scrollTo">クリックで移動</button>

<div id="target"></div>

補足

スクロール先の位置を指定できるが、３パターンしかない。
デフォルトではtop, その他にcenter, bottomが存在する。

<button on="tap:target.scrollTo('position' = 'center')">クリックで移動</button>

ハンバーガーメニュー

結論：基本的にはできるが、AMPコンポーネントで用意されていない動きだと実装コストがかかりそう

AMPコンポーネントで用意されている動きは、右から、または左からメニューが出てくる動き。
その他の動きを作る場合は、
amp-bindでclassの追加/削除をして実装？

<amp-sidebar id="sidebar"
  layout="nodisplay"
  side="right">
  <h3>Sidebar</h3>
  <div></div>
  <button on="tap:sidebar.toggle">close</button>
</amp-sidebar>

<button class="sidebar" on="tap:sidebar.toggle">
  <span class="sidebar-line"></span>
  <span class="sidebar-line"></span>
  <span class="sidebar-line"></span>
</button>

横スライダー

結論：できる

.card-list {
  display: flex;
  overflow-x: scroll;
  padding: 0 10px 0 20px
}
.card {
  list-style: none;
  height: 230px;
  min-width: 143px;
  max-width: 143px;
  background-color: #858585;
}
.card + .card {
  margin-left: 10px;
}

<ul class="card-list">
  <li class="card">
    記事
  </li>
  <li class="card">
    記事
  </li>
  <li class="card">
    記事
  </li>
  <li class="card">
    記事
  </li>
  <li class="card">
    記事
  </li>
  <li class="card">
    記事
  </li>
</ul>

モーダル

また、CSSのみでモーダルを作る方法で、作成可能。

アコーディオン

タブ切り替え