Learning AMP: Parallax Scrolling Effect — AMPire.city

Image for post
Image for post
Originally published at https://ampire.city

What Will I Learn?

Requirements:

Using AMP-FX-Collection

AMP Parallax Image Example

<amp-img 
amp-fx="parallax"
data-parallax-factor="0.7"
class="cover"
layout="responsive"
width="4"
height="1"
src="Image URL"
srcset="AMPire.city highly recommends srcset to increase website loading speed on smaller devices"
alt="AMPire.city highly recommends using alt names for your images to increase readability and SEO"
sizes="100vw">
</amp-img>

WordPress Example

setup_postdata( $post ); 
$attachment_id = get_post_thumbnail_id();
$image_small = wp_get_attachment_image_src( $attachment_id, "thumbnail" );
$image_medium = wp_get_attachment_image_src( $attachment_id, "medium" );
$image_large = wp_get_attachment_image_src( $attachment_id, "large" );
$image = wp_get_attachment_image_src( $attachment_id, "full" );
$alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true); ?>
<amp-img amp-fx="parallax"
data-parallax-factor="0.7"
class="cover bg"
layout="responsive"
width="400"
height="100"
src="<?php echo $image[0]; ?>"
srcset="<?php echo $image_small[0]; ?> 375w, <?php echo $image_medium[0]; ?> 768w, <?php echo $image_large[0]; ?> 1024w, <?php echo $image[0]; ?> 1920w"
alt="<?php echo $alt;?>" sizes="100vw">
</amp-img>

Requirements for AMP Parallax

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

Step-by-step Guide

Data-parallax-factor Options:

Polishing AMP Parallax Effect

Image for post
Image for post
AMP-fx-collection parallax effect might cause some scrolling bugs, which should be fixed with CSS.
.parent-element { overflow:hidden; }

Implementing AMP Parallax Scrolling Effect

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store