AMP Parallax Scrolling Example via AMP-FX-Collection

What Will I Learn?

This tutorial demonstrates a quick way to implement parallax scrolling effect on any AMP website via AMP-fx-collection.

Requirements:

• Basic CSS & HTML knowledge;
• AMP for WordPress (Optional)

Using AMP-FX-Collection

Currently, parallax scrolling effect is probably my favorite component of whole AMP framework regarding web design. It literally animates most of my AMP websites to life. What I really love about AMP parallax effect is that it is easier to be implemented with amp-fx-collection than its JavaScript counterparts. Even more, if yu are using AMP for WordPress plugin, using AMP parallax is as easy as simply pointing out, which images should be animated during the scroll.

As it is referred in amp.dev website, at the moment amp-fx-collection only supports parallax effect, many features such as slide-in, fade-in, fly-in-top etc are in the experimental stage, and to be released in the future.

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

This example should work on post pages but if you change get_post_thumbnail_id(); with the desired ID, the code should work as well.

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>

Working Example

This could be seen across the many AMP websites I coded for my clients, but the simplest example I provided above could be observed in action at the top, on header in any blog entry of AMPire.city website.

Requirements for AMP Parallax

If you don’t have official AMP plugin for WordPress AMP for WordPress installed, you’ll have to add the required amp-fx-collecion script into your website’s header in order for Google Maps to work. If you don’t know how to do, just read my tutorial of inserting code to header and footer on AMP websites.

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

Step-by-step Guide

If you are not used to amp-img, the example code might seem to be a bit complicated, but it is not. Parallax scrolling effect on AMP websites could be implemented by simply adding these two lines to an element:  amp-fx="parallax" and data-parallax-factor="0.7". Everything else is just a recommendation of the correct way of using amp-img. I have a detailed guide of AMP srcset and sizes from AMP-IMG in this article.

amp-fx="parallax" – This attribute enables visual effects on the desired element, and its value determinates the animation. In this case it is parallax.

data-parallax-factor="0.7" – This one is endemic to AMP parallax visual effect. It basically controls the direction and speed of parallax effect.

Data-parallax-factor Options:

• 1 makes an element to behave as nothing happened.
• 0 will make an element to look liked it is fixed on the page.
• >1 value makes the element to move upward as the page is scrolled down. The greater the value – the faster effect.
• >1 value makes the element to move downward as the page is scrolled down. The lower the value – the faster effect.

Polishing AMP Parallax Effect

Depending on your code, there might be some visual defects caused by the parallax effect. Like you can see in the example below, the image scrolls outside its boundaries.

It might be a desired result in some cases, but not in this one. The good news is that it is simple to fix this. All is required is hiding an overflow on the parent element of the one with AMP parallax effect.

.parent-element {
	overflow:hidden;
}

Implementing AMP Parallax Scrolling Effect

As I mentioned before, making AMP parallax to work via amp-fx-collection on you website is way easier than it looks. Though, if you don’t know how to edit your WordPress theme template files, you don’t stand a chance. In that case be sure to hire a professional.

Useful links

• AMP.dev
• ICGfarma
• Safari

 

Originally posted on 25/9/2020
WordPress 5.5.1
AMP 2.0.4