滚动绑定视频广告
- 摘要样式动画滚动绑定动画广告容器视频层内容层

滚动绑定视频广告

摘要

使用 amp-animation、amp-video、amp-img 和 amp-position-observer 创建的示例 AMPHTML 广告，该广告会根据滚动进行动画处理。

Demo of this example

样式

这是一个高级示例，需要一些样式才能使其正常显示和运行。

此处设计的样式是响应式的，适用于各种广告尺寸。

<style amp-custom>

  /*
   * Top level container: It fills the parent viewport
   * that hosts the ad.
   */
  .ad-container {
    font-family: "Roboto", sans-serif;
    position: relative;
    width: 100vw;
    height: 100vh;
    color: #FFFFFF;
  }

  /* Video Layer */
  .video-container {
    /**
     * Specifies that right corner should be used
     * as the anchor point when video is scaled down
     * using scrollbound amp-animation.
     */
    transform-origin: calc(100% - 25px) 25px;
    z-index: 2;
  }

  /* Video player: Click-to-player overlay */
  .video-container .poster-image {
    position: absolute;
    z-index: 1;
  }

  .video-container .poster-image img {
    object-fit: cover;
  }

  .video-container .play-icon {
    position: absolute;
    z-index: 3;
    width: 100px;
    height: 100px;
    background-image: url( https://amp.org.cn/static/samples/img/play-icon.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* Align to the middle */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    opacity: 0.9;
  }

  .video-container amp-video video {
    object-fit: cover;
  }

  /* Content Layer */
  .content-container {
    z-index: 1;
  }

  /* Content Layer: Background image */
  .background amp-img {
    margin: -70px;
  }

  .background amp-img img {
    object-fit: cover;
  }

  /* Content Layer: Title and logo */
  .title {
    position: absolute;
    top: 5px;
    padding-left: 15px;
    font-weight: bold;
  }

  /* Content Layer: Footer and learn more button */
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 5px 15px;
    background-color: rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    font-size: 10px;
    display: flex;
    flex-direction: row;
  }

  .footer>* {
    flex: 1;
    align-self: center;
  }

  .footer .learn-more {
    background-color: #2979ff;
    padding: 5px 15px;
    white-space: nowrap;
    flex: 0;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: #fafafa;
    text-decoration: none;
  }

  /* Generic CSS class to fill a parent */
  .fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>

动画

此示例中会出现两种类型的滚动绑定动画：视频容器的缩放和背景图像的视差移动。

动画是使用 amp-animation 实现的，这是一个使用 Web Animations API 的 AMP 组件

<amp-animation layout="nodisplay" id="videoAnim">
  <script type="application/json">
    {
    "duration": "10s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#videoContainer",
        "keyframes": [
          { "transform": "scale(1)" },
          { "transform": "scale(0.5)"}          ]
      },
      {
        "selector": "#backgroundImg",
        "keyframes": [
          { "transform": "translateY(0)" },
          { "transform": "translateY(60px)"}
        ]
      }
    ]
  }
  </script>
</amp-animation>

滚动时将视频缩小到角落：视频最初覆盖整个广告，当页面滚动时，它会缓慢开始缩小并移动到角落，当广告位于视口中间时达到目标大小。

为实现这一目标，我们定义了 4 个关键帧。在视口的 0% 到 10% 之间，视频为全尺寸，在 10% 到 50% 之间，它开始缩小，直到在视口中间时稳定在其一半大小，并保持相同大小直到最后一个关键帧。

视差背景图像：此广告的背景图像具有微妙的视差效果。为了实现这一点，我们使用滚动绑定动画，并在最后一个关键帧指定 60px 的偏移量。

滚动绑定动画

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

<amp-position-observer
  intersection-ratios="1"
  on="scroll:videoAnim.seekTo(percent=event.percent)"
  layout="nodisplay">
</amp-position-observer>

顶级容器：它会填充托管广告的父视口。

<div class="ad-container">

视频层

在广告容器内部，我们创建一个点击播放叠加层和一个视频元素。

当用户滚动时，amp-animation 会缩小 videoContainer。

<div id="videoContainer" class="video-container fill">
  <div id="clickToPlayOverlay" class="fill">
    <div class="play-icon" role="button" tabindex="0" on="tap:clickToPlayOverlay.hide, video.play"></div>

    <amp-img class="poster-image" layout="fill" src="/static/samples/img/car-video-poster.png"></amp-img>
  </div>

  <amp-video id="video" controls layout="fill" src="/static/samples/video/car-video-360p.mp4"></amp-video>
</div>

内容层

创建内容层，其中托管背景图像和有关广告的信息。

当用户滚动时，amp-animation 会为 backgroundImg 模拟视差效果。

<div class="content-container fill">
  <div class="background">
    <amp-img id="backgroundImg" layout="fill" src="/static/samples/img/car-bg.jpg"></amp-img>
  </div>
  <div class="title">
    <div>
      <amp-img layout="fixed" width="72" height="32" src="/static/samples/img/car-logo.png"></amp-img>
    </div>
    <div>THE ALL NEW</div>
    <div>WS-X LUX</div>
  </div>
  <div class="footer">
    <span>36 months lease, $189/month, $2999 due at signing</span>
    <a href="https://ampproject.org" target="_blank" class="learn-more">LEARN MORE</a>
  </div>
</div>

需要进一步解释？

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

转到 Stack Overflow

一个未解释的功能？

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

在 GitHub 上编辑示例

撰写者： @zhouyx