Documentation and examples for opting parallax into responsive behavior: Google AMP Parallax Library.
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 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>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.
<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>