AMP

Important: this documentation is not applicable to your currently selected format stories!

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 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub