[MUSIC PLAYING]
Let's take a look
at my starter code.
It's just some divs
acting as content.
Now, I want my hero
image to take up
the entire first
viewport, so I'll
add a div that takes the entire
width and the entire height
and give it a class of hero.
Next, I'll define the styles.
I'm going to use a height
of 100 view heights
and a width of 100 view widths.
And for fun, I'll make
the background orange
just so you can see it.
Boom, Phase 1 accomplished.
We have a div that will take
up the entire first viewport
of any size screen.
Next, let's replace the orange
background with an image.
Now, I think I know what
all of you are thinking.
I'm going to add an
AMP image into my div,
and that kind of thinking is
really intuitive thinking.
But because this is the first
thing my users will see,
I want this part to load
really, really, really fast.
And AMP image offers some
great features out of the box,
like lazy loading, but it
requires the AMP framework
to be downloaded and
initialized first,
and I just want the
image to show up
as the very first thing.
So in this particular
use case, it's
better to embed it as a
background image via CSS.
So that's exactly
how I'll do it.
Let's replace background
color with background image,
then point to the URL.
My image isn't
placed quite right,
so I'll just add some styles.
And all of this is classic CSS.
None of it is AMP specific,
but it is AMP valid.
And there, my hero image loads
quickly and completely covers
any size screen.
The next thing I promised
was text, so here we go.
I'm going to use an h1 element
and just add some styles to it
to help it be more palatable.
And now comes the
visually interesting part.
I'm going to add a
parallax effect to it.
A real quick explanation for
those asking, what is parallax,
parallax is an effect that
makes an element appear
to scroll faster or slower
than the user's scroll speed.
It's awesome.
I want it.
Usually, this effect is
super tricky to get right.
But in AMP, I only have to
import the AMP FX collection
by adding the AMP
FX collection script
to the head of my document.
Then I'll add the
AMP FX attribute
with a value of parallax,
then define the scroll speed
via data parallax factor.
And I'm going to give
it a value of 1.7.
And that's it.
We have created a hero image
with parallax text that
is super visually interesting.
[MUSIC PLAYING]
