Google AMP Parallax Library

Documentation and examples for opting parallax into responsive behavior: Google AMP Parallax Library.

Google AMP Parallax

The amp-fx-collection component provides a collection of preset visual effects, such as parallax that can be easily enabled on any element via amp-fx attribute.

Add the Google AMP FX collection script

Add the script mentioned below to the Google AMP pages where you would like to enable amp-fx-collection. The script should be added to the <head> section.

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

Google AMP Parallax · Text

The parallax effect allows an element to move as if it is nearer or farther relative to the foreground of the page content. As the user scrolls the page, the element scrolls faster or slower depending on the value assigned to the data-parallax-factor attribute.

Parallax effect can be added to any element by adding amp-fx="parallax" attribute and the intensity of the effect can be controlled via data-parallax-factor.

data-parallax-factor specifies a decimal value that controls how much faster or slower the element scrolls relative to the scrolling speed: A value greater than 1 scrolls the element upward (element scrolls faster) when the user scrolls down the page. A value less than 1 scrolls the element downward (element scrolls slower) when the user scrolls downward.

Google AMP parallax
Google AMP title parallax
<div class="parallax-section">
  <h5 amp-fx="parallax"
    data-parallax-factor="1.3">
    <span class="parallax-title">Google AMP parallax</span><br>
    <span>Google AMP title parallax</span>
  </h5>
  <amp-img
    width="..."
    height="..."
    src="..."
    alt="...
    layout="responsive">
  </amp-img>
</div>

Google AMP Parallax · Images

<div class="parallax-image-window">
  <amp-img amp-fx="parallax"
    data-parallax-factor="1.15"
    width="..."
    height="..."
    src="..."
    alt=""
    layout="responsive">
  </amp-img>
</div>

Google AMP parallax documentation

Read more
We use cookies to optimize site functionality and give you the best possible experience.