The Accelerated Mobile Pages (AMP) project was evolved by google and was declared in 2015 but now it works as an open-source project. In beginning, AMP pages took place in 2016 to improve the loading speed of web pages and ads. AMPs are standard counterparts and can be displayed. In this blog, we will focus on the flying carpet ad type.
Flying carpet ad
A flying carpet comprises a parent ad unit window and a child ad unit fixed in relation to the viewport. When the user scrolls up the parent ad unit appears as a transparent window, coming into view and revealing a child ad section. The child ad unit remains in the same place but the window the user looks through moves up and down as they scroll. This is an example of this on the AMP developer site here:
https://support.google.com/admanager/thread/4819010/flying-carpet-ad?hl=en
Sometimes you could complain that flying carpet is not a great name for this ad unit. When the lift goes up, the child ads (the different floors in the building remain unchanged or constant while you as the viewer slide past them and reveal the image.
This type of method is often referred to as parallax ads, a term that is used to describe the movement of objects relative to the viewer’s position. In web designing, the background of a website slides at various speeds to the foreground which creates beautiful transitions between the two. Parallax ads are also found with AMP.
PAGE LAYOUTS
The flying carpet window should always be placed below the first viewport so that the user can slide up and down the full height of the child unit behind. You are permitted to begin the flying carpet at 75% of the opening viewport and the flying carpet in the bottom 25%. Likewise, there should be a full viewport between the bottom of the flying carpet and the bottom of the page.
HOW TO APPLY
To apply flying carpet ads with AMP, you will need to run the following scripts on your page:
At the place on the page, you have to show the flying carpet that you need to place in the following code (image from the amp/dev site (flying carpet example)
For example, the width and height mean the dimensions of the image in the background. The amp-fx-flying-carpet height parameter provides the window’s height throughout which you can see the bg rather than the big image itself.
For more information click here on our website Mahimeta.com