网站

amp-fx-collection

简介

amp-fx-collection 组件提供了一组预设的视觉效果，例如视差，可以通过 amp-fx 属性轻松在任何元素上启用。

目前，仅支持视差效果。计划很快支持更多效果，例如淡入、滑入等。amp-fx-collection 取代了现在已弃用的 amp-fx-parallax 组件。

设置

在标头中导入 amp-fx-collection 扩展。

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

样式

这些示例中使用的 CSS 在这里包含以供参考。这些规则只是使示例工作所必需的，但对于这里涵盖的概念并非根本。

<style amp-custom>
  .header {
    position: relative;
    overflow: hidden;
  }

  .header h1 {
    color: white;
    bottom: 10%;
    left: 10px;
    position: absolute;
    z-index: 1;
    font-size: 1.7em;
  }

  .title {
    background-color: black;
    color: white;
  }

  .parallax-image-window {
    overflow: hidden;
  }

  .parallax-image-window amp-img {
    margin-bottom: -20%;
  }
</style>

标题视差

视差效果允许元素移动，就像它相对于页面内容的前景更近或更远一样。当用户滚动页面时，元素会根据分配给 data-parallax-factor 属性的值更快或更慢地滚动。

可以通过添加 amp-fx="parallax" 属性将视差效果添加到任何元素，并且可以通过 data-parallax-factor 控制效果的强度。

data-parallax-factor 指定一个十进制值，该值控制元素相对于滚动速度滚动得快多少或慢多少： * 大于 1 的值会在用户向下滚动页面时向上滚动元素（元素滚动得更快）。 * 小于 1 的值会在用户向下滚动时向下滚动元素（元素滚动得更慢）。

<div class="header">
  <h1 amp-fx="parallax" data-parallax-factor="1.3">
      <span class="title">Lorem Ipsum</span>
  </h1>
  <amp-img width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1484961361402-1ee9b1c7accb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9b58d12098d2e6d4a1199ed426772eb9&auto=format&fit=crop&w=1001&q=80"></amp-img>
</div>

视差图像窗口

<div class="parallax-image-window">
  <amp-img amp-fx="parallax" data-parallax-factor="1.15" width="618" height="583" layout="responsive" src="https://images.unsplash.com/photo-1527683040093-3a2b80ed1592?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3493d310a725643c1aa1cd201065d31c&auto=format&fit=crop&w=1130&q=80"></amp-img>
</div>

滚动触发淡入

一旦目标元素在视口中可见，fade-in 效果允许元素淡入。

可以通过向元素添加 amp-fx="fade-in" 属性将滚动触发的淡入效果添加到任何元素。

目前，仅支持滚动触发的定时动画。也就是说，一旦元素在视口中，将开始一个定时动画，使元素淡入。您可以通过以下属性控制动画

data-duration - 这是动画发生的时间长度。默认值为 1000ms。
data-easing - 此参数允许您在动画的持续时间内改变动画的速度。默认值为 ease-in，即 cubic-bezier(0.40, 0.00, 0.40, 1.00)。您还可以从可用的预设之一中选择
"linear" - cubic-bezier(0.00, 0.00, 1.00, 1.00),
"ease-in-out" - cubic-bezier(0.80, 0.00, 0.20, 1.00),
"ease-in" - cubic-bezier(0.80, 0.00, 0.60, 1.00),
"ease-out" - cubic-bezier(0.40, 0.00, 0.40, 1.00) (默认),
或指定 custom-bezier() 输入。
data-margin-start - 此参数确定何时触发定时动画。<percent> 中指定的值表示当元素高于视口的指定百分比时应触发动画。默认值为 5%

具有默认属性的滚动触发淡入动画

<amp-img amp-fx="fade-in" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1524495195760-3266feca5b15?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7a508f55ae88c8eac7bab9380acded01&auto=format&fit=crop&w=1567&q=80"></amp-img>

慢速淡入动画

通过指定 data-duration="2000ms" 使动画持续更长时间的淡入动画。

<amp-img amp-fx="fade-in" data-duration="2000ms" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1526803389087-5a4296962cd7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3f6fada754f8d46245da58be0599c1b8&auto=format&fit=crop&w=1950&q=80" alt="Picture of a road"></amp-img>

延迟淡入动画

通过指定 data-margin-start="50%"，当元素超过视口的 50% 时触发动画。

<amp-img amp-fx="fade-in" data-margin-start="50%" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1524063853276-ab560795d106?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9bc985b4c36017cfaf3e7359254b1e93&auto=format&fit=crop&w=1950&q=80" alt="Picture of a road"></amp-img>

使用不同贝塞尔曲线的淡入

通过指定 data-easing="linear"，将动画的缓动曲线更改为预设的线性曲线。

<amp-img amp-fx="fade-in" data-easing="linear" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1523316970297-654e42445f32?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c753fde260b01ea8e24a0c500ff1a93a&auto=format&fit=crop&w=1950&q=80" alt="Picture of a rainy road"></amp-img>

滚动相关的淡入

fade-in-scroll 效果允许元素在用户在视口中滚动时淡入。

可以通过向元素添加 amp-fx="fade-in-scroll" 属性将滚动相关的淡入效果添加到任何元素。您可以通过以下属性控制动画： * data-margin-start - 此参数确定何时触发定时动画。percent 中指定的值表示当元素高于视口的指定百分比时应触发动画。默认值为 0% * data-margin-end - 此参数确定何时停止定时动画。percent 中指定的值表示当元素超过此阈值时，动画应完全可见。默认值为 50% * data-repeat - 默认情况下，一旦元素完全可见，元素的透明度就会被锁定。如果开发人员希望在元素完全可见后也更改透明度，请在元素上指定此属性。

具有默认属性的基于滚动的淡入动画

<amp-img amp-fx="fade-in-scroll" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1528067609263-ca1bca6f0af1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=719da4579acae6264f2dd12a29668441&auto=format&fit=crop&w=2378&q=80"></amp-img>

自定义开始/结束点

通过指定 data-margin-start="20%" 和 data-margin-end="80%" 属性，当元素超过视口的 20% 时触发动画，并在元素超过视口的 80% 时结束动画。

<amp-img amp-fx="fade-in-scroll" data-margin-start="20%" data-margin-end="80%" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1527596510581-97fb7ea1bb09?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a28f08b21bd8ec9d0e846a4af0a5d06b&auto=format&fit=crop&w=2000&q=80"></amp-img>

完全滚动相关的动画

通过指定 data-repeat 属性，使动画完全依赖于滚动操作。

<amp-img amp-fx="fade-in-scroll" data-repeat width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1527410514447-0d41efed395f?ixlib=rb-0.3.5&s=bcfb4d1eb7e099ab63f0edfa39580976&auto=format&fit=crop&w=1950&q=80" alt="Picture of a tennis court"></amp-img>

从左侧飞入

fly-in-bottom、fly-in-top、fly-in-left 和 fly-in-right 效果允许元素在目标元素在视口中可见后飞入。

可以通过向元素添加 amp-fx="fly-in-bottom"、amp-fx="fly-in-top"、amp-fx="fly-in-left" 或 amp-fx="fly-in-right" 属性将滚动触发的飞入效果添加到任何元素。

这是一个滚动触发的定时动画，即一旦元素在视口中，将开始一个定时动画，该动画沿 X/Y 轴平移元素。您可以通过以下属性控制动画

data-duration - 这是动画发生的时间长度。默认值由您的设备大小确定，以便在移动设备、平板电脑和台式机设备上获得最佳预设值。有关此内容的更多详细信息，请阅读有关 data-duration 属性的文档。
data-fly-in-distance - 此参数确定平移发生的视口百分比。默认值由您的设备大小确定，以便在移动设备、平板电脑和台式机设备上获得最佳预设值。有关此内容的更多详细信息，请阅读有关 data-fly-in-distance 属性的文档。
data-easing - 此参数允许您在动画的持续时间内改变动画的速度。默认值为 ease-in，即 cubic-bezier(0.40, 0.00, 0.40, 1.00)。您还可以从可用的预设之一中选择
"linear" - cubic-bezier(0.00, 0.00, 1.00, 1.00),
"ease-in-out" - cubic-bezier(0.80, 0.00, 0.20, 1.00),
"ease-in" - cubic-bezier(0.80, 0.00, 0.60, 1.00),
"ease-out" - cubic-bezier(0.40, 0.00, 0.40, 1.00) (默认),
或指定 custom-bezier() 输入。
data-margin-start - 此参数确定何时触发定时动画。percent 中指定的值表示当元素高于视口的指定百分比时应触发动画。默认值为 5%

具有默认属性的滚动触发飞入动画。

<amp-img amp-fx="fly-in-left" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1521229478162-4a20534cdec5?ixlib=rb-0.3.5&s=e93c4d12f98243f12b52a430bdb84720&auto=format&fit=crop&w=1661&q=80"></amp-img>

从右侧飞入

具有默认属性的滚动触发从右侧飞入动画。

<amp-img amp-fx="fly-in-right" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1527092035324-6319ef0fcf7a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=969edced71a03ef57558006151596c1b&auto=format&fit=crop&w=1651&q=80"></amp-img>

从底部飞入

具有默认属性的滚动触发从底部飞入动画。

<amp-img amp-fx="fly-in-bottom" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1527016856658-ab68a6bad3a1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=46287f1f2996d26e5f8fde5a3f6dd7da&auto=format&fit=crop&w=1650&q=80"></amp-img>

从顶部飞入

具有默认属性的滚动触发从顶部飞入动画。

<amp-img amp-fx="fly-in-top" width="1600" height="900" layout="responsive" src="https://images.unsplash.com/photo-1527048322413-4e4e56c8ab3b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=69287e502ab9e858262921ee9dfcd271&auto=format&fit=crop&w=1650&q=80"></amp-img>

慢速飞入动画

通过指定 data-duration="2000ms" 使动画持续更长时间的飞入动画。

<amp-img amp-fx="fly-in-left" data-duration="2000ms" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1523255971896-2c08d93dd3a8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f1f0f9ab94d2d65d964b1b8681563d93&auto=format&fit=crop&w=1650&q=80" alt="Picture of a starry sky"></amp-img>

飞入动画距离

通过指定 data-fly-in-distance="50%"，在更大的距离上发生的动画。

<amp-img amp-fx="fly-in-right" data-fly-in-distance="50%" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1522426266214-ec2d2abb9ce0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=87c5df0ba70b2f9971f35c31e5ba71b8&auto=format&fit=crop&w=1653&q=80" alt="Picture of a starry sky"></amp-img>

延迟飞入动画

通过指定 data-margin-start="50%"，当元素超过视口的 50% 时触发动画。

<amp-img amp-fx="fly-in-top" data-margin-start="50%" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1521934283989-acaa8ceb335a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c3188079fb9f2e4e364fd2dc43adb68&auto=format&fit=crop&w=668&q=80" alt="Picture of a starry sky"></amp-img>

使用不同贝塞尔曲线的飞入

通过指定 data-easing="linear"，将动画的缓动曲线更改为预设的线性曲线。

<amp-img amp-fx="fly-in-bottom" data-easing="linear" width="1280" height="873" layout="responsive" src="https://images.unsplash.com/photo-1473806189829-9641421a59f1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=75ddee8b694c5bef8cb935f6d0effa3a&auto=format&fit=crop&w=1650&q=80" alt="Picture of a starry sky"></amp-img>

组合预设：淡入和飞入

开发人员还可以通过向 amp-fx 参数提供以空格分隔的预设列表来组合不同的预设。例如，您可以让图像淡入并从底部飞入。

<amp-img amp-fx="fade-in fly-in-bottom" data-duration="600ms" width="650" height="433" layout="responsive" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9e2448175103d36c873e2511d112d339&auto=format&fit=crop&w=1950&q=80" alt="Picture of a starry sky"></amp-img>

组合预设：视差和淡入

您还可以在同一标题上组合视差和淡入。

<div class="parallax-image-window">
  <amp-img amp-fx="parallax fade-in-scroll" data-parallax-factor="1.1" data-margin-start="10%" data-margin-end="80%" data-repeat width="649" height="432" layout="responsive" src="https://images.unsplash.com/photo-1524293765125-99fabde3861f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6e56fc64d653a9fe5b1a7f602d57abcd&auto=format&fit=crop&w=1650&q=80" alt="Picture of a starry sky"></amp-img>
</div>

需要进一步解释吗？

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

前往 Stack Overflow

未解释的功能？

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

在 GitHub 上编辑示例

由 @aghassemi 撰写