方向效果基礎知識

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

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

<style amp-custom>
#scrollText {
  font-family: Helvetica, sans-serif;
  padding: 10px;
  max-width: 412px;
  height: 500px;
  margin: auto;
  overflow: hidden;
}

#ipsum {
  background-image: linear-gradient(white, deeppink);
}

.clock-hand {
  position: absolute;
  width: 2vw;
  height: 20vw;
  max-height: 90px;
  max-width: 10px;
  top: 50%;
  left: 50%;
  z-index: 2;
  background: #FAFAFA;
  transform-origin: 50% 0%;
  border-radius: 10px;
  transform: rotate(-180deg)
}

.rotate-2 {
  transform: rotate(-270deg)
}
</style>

<div id="scrollText">
  <amp-orientation-observer beta-range="0 180" on="beta:anim.seekTo(percent=event.percent)" layout="nodisplay">
  </amp-orientation-observer>
  <div id="ipsum">
    <p>Move phone along y axis to scroll</p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est et dui maximus sagittis vel imperdiet nibh. Nam finibus nisl sit amet neque gravida pellentesque. Phasellus vulputate, tortor ut pretium ultricies, nibh massa vestibulum nisi, a vestibulum orci velit eget nisl. Maecenas dui nulla, consectetur sed porttitor ac, varius quis nibh. In pellentesque nisi quis ligula fringilla, non lobortis felis tincidunt. Nullam hendrerit sodales purus, nec rhoncus urna ultricies ac. Cras vestibulum pulvinar libero, quis faucibus nisi. Quisque ut lacus vitae justo faucibus mollis vel bibendum neque. Quisque pretium nunc in nunc vulputate, interdum ullamcorper nisl convallis. Cras vitae finibus urna. Sed enim turpis, consectetur eu velit nec, sodales mollis justo. Curabitur pretium luctus felis sagittis rhoncus. Donec vitae vehicula erat, non pellentesque odio. Vestibulum accumsan rhoncus placerat. Donec rutrum ullamcorper sodales. Vestibulum pretium ut diam faucibus tincidunt.

    Aenean vestibulum nisl nec arcu eleifend posuere. Aliquam nec feugiat nibh. Cras pretium ut purus quis pharetra. Morbi urna augue, lobortis ac porttitor vitae, feugiat eget dui. Nam lacinia commodo tellus vel sagittis. Aliquam id pharetra metus. Nam tristique vulputate maximus. Donec consequat aliquam lacus, ac fermentum magna iaculis tristique. In urna dolor, rutrum non mattis at, luctus nec lectus. Maecenas consequat, massa at placerat convallis, arcu elit consequat nulla, vel egestas justo augue vitae mauris. Nullam est diam, aliquam sit amet posuere non, condimentum et ante. Ut at ullamcorper ipsum. Nullam non efficitur sapien. Praesent vitae odio diam. Nullam dignissim hendrerit neque non tempor.

    Praesent non arcu volutpat, maximus risus in, rutrum tellus. Quisque nec porttitor purus. Quisque hendrerit erat consequat dignissim vehicula. Quisque tortor orci, bibendum et lacinia at, porttitor nec est. Nunc venenatis sollicitudin dui, et fermentum lectus euismod vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus diam ante, sagittis non finibus sed, pulvinar id dolor. Maecenas ac facilisis lacus. Suspendisse potenti.

    Curabitur dignissim consequat ante, quis facilisis ipsum faucibus nec. Suspendisse potenti. Mauris lorem eros, finibus id tincidunt quis, bibendum at urna. Aenean quis tortor ultricies, sodales ipsum id, imperdiet felis. Maecenas vestibulum cursus est convallis imperdiet. In convallis tempus lacus, suscipit tempus turpis mattis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin massa massa, molestie eu pretium in, eleifend vel erat. Pellentesque dictum turpis sit amet neque elementum aliquam a sed metus. Donec dignissim laoreet massa vel vehicula. Praesent pretium arcu consequat augue dignissim, at ultrices quam placerat. Proin justo odio, fermentum sed malesuada eu, facilisis non quam. In molestie enim nec ligula tempus, sed condimentum dui molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis, lacus cursus varius malesuada, lacus enim blandit ipsum, non hendrerit est sapien et ex. Nullam quis pulvinar nulla, vitae venenatis massa.

    In mattis at eros id ullamcorper. Aenean ac hendrerit magna. Sed volutpat sapien quis justo accumsan eleifend. Praesent lobortis, velit sed elementum molestie, urna nibh malesuada lacus, vitae efficitur tellus elit ac augue. Aliquam erat volutpat. Praesent ultricies felis erat, ut luctus nulla pellentesque in. Etiam lacinia neque id neque egestas tempor.
    <h3>End of text</h3>
  </div>
</div>

<amp-animation id="anim" layout="nodisplay">
  <script type="application/json">
    {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#ipsum",
        "keyframes": [
          { "transform": "translateY(0)" },
          { "transform": "translateY(-1170px)" }
        ]
      }
    ]
  }
  </script>
</amp-animation>

<div id="clock-scene-1" class="clock-scene">
  <amp-orientation-observer beta-range="0 180" on="beta:clockAnim1.seekTo(percent=event.percent)" layout="nodisplay">
  </amp-orientation-observer>
  <amp-img layout="responsive" width="2" height="1.5" src="/static/samples/img/clock.jpg">
    <div class="clock-hand rotate-1"></div>
  </amp-img>
</div>

<amp-animation id="clockAnim1" layout="nodisplay">
  <script type="application/json">
    {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#clock-scene-1 .rotate-1",
        "keyframes": [
          { "transform": "rotate(-180deg)" },
          { "transform": "rotate(180deg)" }
        ]
      }
    ]
  }
  </script>
</amp-animation>

<div id="clock-scene-2" class="clock-scene">
  <amp-orientation-observer on="gamma:clockAnim2.seekTo(percent=event.percent)" layout="nodisplay">
  </amp-orientation-observer>
  <amp-img layout="responsive" width="2" height="1.5" src="/static/samples/img/clock.jpg">
    <div class="clock-hand rotate-2"></div>
  </amp-img>
</div>

<amp-animation id="clockAnim2" layout="nodisplay">
  <script type="application/json">
    {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#clock-scene-2 .rotate-2",
        "keyframes": [
          { "transform": "rotate(-270deg)" },
          { "transform": "rotate(-90deg)" }
        ]
      }
    ]
  }
  </script>
</amp-animation>

<div id="clock-scene-3" class="clock-scene">
  <amp-orientation-observer alpha-range="0 360" on="alpha:clockAnim3.seekTo(percent=event.percent)" layout="nodisplay">
  </amp-orientation-observer>
  <amp-img layout="responsive" width="2" height="1.5" src="/static/samples/img/clock.jpg">
    <div class="clock-hand rotate-3"></div>
  </amp-img>
</div>

<amp-animation id="clockAnim3" layout="nodisplay">
  <script type="application/json">
    {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#clock-scene-3 .rotate-3",
        "keyframes": [
          { "transform": "rotate(90deg)" },
          { "transform": "rotate(-270deg)" }
        ]
      }
    ]
  }
  </script>
</amp-animation>