This site uses third-party cookies, learn more or accept
dark light

Moving away from AMP

Written by Max Pelic on

When I first built this site, I decided to use Google's AMP to try and make it faster. I didn't realize how limiting AMP would be to the content on my site, and so I've started moving away from AMP and recreating it's features manually using Vanilla JS.

Here's a list of the main features I had to replace:

Parallax Scrolling

The AMP FX Collection included a parallax scrolling feature I was using, so I had to make one from scratch on my site. The biggest challenge was making it look smooth, so I ended up using the will-change attribute (which worked quite well). When creating it, I also fixed some bugs I found in the AMP version.

Here's the code I used to re-create the parallax:

1let parallaxElements = document.body.querySelectorAll('[parallax]'), scrollPosition = 0;

2for(let i = 0; i < parallaxElements.length; i++){
3 parallaxElements[i].style.willChange = 'transform';
4 let children = parallaxElements[i].querySelectorAll('*');
5 for(let j = 0; j < children.length; j++){
6 children[j].style.willChange = 'transform';
7 }
8}
9document.addEventListener('scroll', function(){
10 if(window.scrollY === scrollPosition){
11 return;
12 }
13 scrollPosition = window.scrollY;
14 for(let i = 0; i < parallaxElements.length; i++){
15 parallaxElements[i].style.transform = 'translateY(' + scrollPosition / 2 + 'px)';
16 //add addtional to transform
17
if(parallaxElements[i].hasAttribute('addTransform')){
18 parallaxElements[i].style.transform += ' ' + parallaxElements[i].getAttribute('addTransform');
19 }
20 }
21});

Cookie notification based on location

I used an IP lookup service to replace AMP's location plugin, and used localstorage to keep track of the cookie notification being accepted.

Share this article:

Previous Article: SQL Conditional Order By

Next Article: Websockets and stuff