滚动绑定动画广告
- 摘要样式动画滚动绑定动画横幅标记卡片

滚动绑定动画广告

摘要

使用 amp-position-observer 和 amp-animation 创建交互式广告的示例 AMPHTML 广告。

样式

这是一个高级示例，需要一些样式才能使其正常显示和工作。此处设计的样式是响应式的，适用于各种广告尺寸。

<style amp-custom>
  /* Main element that contains the creative. */
  .root-container {
    background: #000;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    overflow: hidden;
    width: 340px;
    height: 240px;
    position: relative;
    margin: 0 auto;
    display: block;
  }
  /* Position the footer absolutely, at the bottom of the container. */
  .footer {
    background: #000;
    font-size: 12px;
    padding: 8px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    color: #fff;
    z-index: 2;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .footer-logo {
    border-right: 1px solid #fff;
    padding: 0 8px 0 0;
    margin: 0 8px 0 0;
  }
  .logo-img {
    display: block;
  }
  .stretch {
    flex: 1;
  }
  .button {
    text-transform: uppercase;
    padding: 8px;
    color: #fff;
    display: inline-block;
    background-color: #2979ff;
    text-decoration: none;
  }
  .button:active {
    background-color: #92bbff;
  }
  /* Basic cards styling */
  .cards-container {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
  }
  .card {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  /* Change position of the expand button for the middle card */
  .card-gauges .expand-button {
    left: 90px;
    top: 50px;
  }
  .learn-more a:active {
    background-color: #f0f0f0;
  }
</style>

动画

动画是使用 amp-animation 实现的，这是一个 AMP 组件，它使用 Web Animations API 来支持时间和滚动的动画。

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

使卡片沿滚动方向相反滑动：广告最初显示最上面的卡片。随着文档的滚动，其他两张卡片会显示出来。

为了实现这一点，我们定义了 4 个关键帧。在视口的 0% 到 10% 之间，显示第一张卡片。在 10% 到 90% 之间，卡片容器将垂直平移到 -384 像素，这是每张卡片高度的两倍的负值。到达此点时，第三张卡片将完全显示。在 90% 到 100% 之间，保持相同的位置。

滚动绑定动画

滚动绑定动画是使用 amp-position-observer 实现的，这是一个 AMP 组件，用于监视用户滚动时元素在视口中的位置，并分派可以与其他组件一起使用的进入、退出和滚动事件。

<amp-position-observer
  intersection-ratios="1"
  viewport-margins="10vh"
  on="scroll:adAnim.seekTo(percent=event.percent)"
  layout="nodisplay">
</amp-position-observer>

<div class="root-container">
 <div class="footer">
   <div class="footer-logo">
     <amp-img src="/static/samples/img/car-logo.png"
         width="72"
         height="32"
         layout="fixed"
         alt="Howdy"
         class="logo-img"></amp-img>
   </div>
   <div class="stretch">The All-New WX-S R5</div>
   <a href="https://amp.org.cn/documentation/examples/" target="_blank" class="button">
     Learn more
   </a>
 </div>

卡片

<div class="cards-container" id="cardsContainer">
  <div class="card card-seats">
    <amp-img src="/static/samples/img/car-seats.jpg"
        width="340"
        height="192"
        layout="responsive"
        alt="Ergonomic Leather Seats"
        class="a-carousel-img"></amp-img>
  </div>
  <div class="card card-gauges">
    <amp-img src="/static/samples/img/car-gauges.jpg"
        width="340"
        height="192"
        layout="responsive"
        alt="Sport Gauge Cluster"
        class="a-carousel-img"></amp-img>
  </div>
  <div class="card card-engine">
    <amp-img src="/static/samples/img/car-engine.jpg"
        width="340"
        height="192"
        layout="responsive"
        alt="Tuned Engine"
        class="a-carousel-img"></amp-img>
  </div>
</div>

需要进一步解释吗？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您针对您特别感兴趣的问题进行一次性贡献。

在 GitHub 上编辑示例

由 @zhouyx 撰写

滚动绑定动画广告

摘要

样式

动画

滚动绑定动画

横幅标记

卡片