Learning AMP: Parallax Scrolling Effect — AMPire.city

Originally published at https://ampire.city

What Will I Learn?

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

Requirements:

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 , 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>

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.

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.

AMP-fx-collection parallax effect might cause some scrolling bugs, which should be fixed with CSS.

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.

Versions:

Wordpress 5.5.1

AMP 2.0.4

Originally published at https://ampire.city on September 25, 2020.

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Uploading Files using Multer on Server in NodeJS and ExpressJS

A Journey into Just-In-Time Compilation in Javascript Language — Part - 1

Basic Typescript in React project

Zaio Research Project: HTML

Fantastic Web Elements and how to find them — a guide to locate web elements for testing and web…

We @getoccasion will miss this incredible view in a few weeks.

Setting up a Design System in Storybook with React, Styled Components, Tailwind, and Typescript in…

Installing K6 and Running a Load Test

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
Alis Monte

Alis Monte

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

More from Medium

Getting Started with MERN Stack

How to Change WooCommerce Default Transaction Descriptor in Stripe without any Plugin

How to Duplicate a Git Repo and Copy Git History

5 Reasons to Choose Node.js for Web Development