AMP

amp-orientation-observer

Description

Monitors the orientation of an element within the viewport as a user scrolls, and dispatches events that can be used with other AMP components.

 

Required Scripts

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

Supported Layouts

Usage

The amp-orientation-observer component monitors the orientation of a device, and dispatches low-trust level events (alpha, beta, gamma) that report changes in the device's orientation along the alpha, beta and gamma axises in terms of angle and percent. These can be used to trigger actions (Only Low Trust Actions) on other components (e.g., amp-animation).

The amp-orientation-observer component is only useful when used with other components and does not do anything on its own.

Currently, amp-animation and several video players in AMP are the only components that allow low-trust events to trigger their actions (e.g., starting an animation, seeking to a position within the animation, pausing a video, etc.).

Scroll-bound animations

Imagine an animation where the hour hand of a clock rotates as the user scrolls the page.

<!-- An animation that rotates a clock hand 180 degrees. -->
<!--
   Note that we are NOT setting `trigger=visibility`
   since we will manually trigger the animation.
-->
<amp-animation id="clockAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "3s",
      "fill": "both",
      "direction": "alternate",
      "animations": [
        {
          "selector": "#clock-scene .clock-hand",
          "keyframes": [
            {"transform": "rotate(-180deg)"},
            {"transform": "rotate(0deg)"}
          ]
        }
      ]
    }
  </script>
</amp-animation>

<!-- The clock container -->
<div id="clock-scene">
  <!--
    Use amp-orientation-observer to tie the movement of the clock scene within
    the viewport to the timeline of the animation
  -->
  <amp-orientation-observer
    on="beta:clockAnim1.seekTo(percent=event.percent)"
    layout="nodisplay"
  >
  </amp-orientation-observer>
  <amp-img layout="responsive" width="2" height="1.5" src="./img/clock.jpg">
    <div class="clock-hand"></div>
  </amp-img>
</div>

Attributes

alpha-range (optional)

Specifies that the associated action should only take place for changes between the specified range along the z axis. Specified as a space separated list of 2 values (e.g., alpha-range="0 180"). By default, the related action is triggered for all changes between 0 and 360 degrees.

beta-range (optional)

Specifies that the associated action should only take place for changes between the specified range along the x axis. Specified as a space separated list of 2 values (e.g., beta-range="0 180"). By default, the related action is triggered for all changes between 0 and 360 degrees.

Example: Using beta-range to limit the range of degrees to watch along the x axis

Imagine an animation where the hour hand of a clock rotates as the user scrolls the page.

<amp-orientation-observer
  beta-range="0 180"
  on="beta:clockAnim1.seekTo(percent=event.percent)"
  layout="nodisplay"
>
</amp-orientation-observer>

gamma-range (optional)

Specifies that the associated action should only take place for changes between the specified range along the y axis. Specified as a space separated list of 2 values (e.g., gamma-range="0 90". By default the related action is triggered for all changes between 0 and 360 degrees.

smoothing (optional)

When enabled, outputs a moving average of the last n values instead of the raw value read from the sensor. By default, when activated, smoothing will be set to 4 points.

Events

These are the low-trust level events that the amp-orientation-observer component dispatches:

alpha

Represents the motion of the device around the z axis.

beta

Represents the motion of the device around the x axis.

gamma

Represents the motion of the device around the y axis. This represents a left to right motion of the device.

Validation

See amp-orientation-observer rules in the AMP validator specification.

さらに支援が必要ですか?

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか?他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする
バグや不足している機能がありますか?

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする