On this Webflow lesson we take a look at preparing our parallax elements. How to position 3D assets correctly using margin offsets and z-index in Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
all right guys
welcome back we're almost finished with
the landing page with webflow i want to
go over
a little bit of the wireframes that we
created earlier in our previous
course we created a section that will
answer some of the
users questions like what's the cost
on this platform and we want to make it
sort of like a storytelling feature
where as you scroll down
the text kind of animates into place we
see kind of some parallax elements
floating around
and we have two main statements which
are
say hello to the future and free forever
on that design we
also took a look at some of the 3d
effects that we're adding so the first
thing i want to do is pull these
statements into
our sections so we already have created
the section here
so let's go ahead and add a simple
container like this
and drop in that title tag
we have say hello to the future which is
the first title
and if we copy this section
i think uh it would be easier if we have
two of these big sections
so that as you scroll down this first
text comes in
and then as you continue scrolling we
see the device
with some of the three of the elements
and then we we see another
section for free forever but we want to
make sure we give this max container a
maximum width
so that it doesn't get past a certain
point
for that we can create a utility class
so we can just say max
so let's say max out at 500 pixels
what we would do is we we create this
utility class
and we say on the max with property max
with 500 pixels
so just like that we created a simple
container that will that won't go past
those 500 pixels and that wraps out our
text nicely
into two lines okay and as we continue
here we're gonna start adding some of
these assets
so let's create a new section let's just
duplicate this section
this section actually has a parallax id
we're not using this id yet but
it's good to know where we create a
parallax
another copy of this same section want
to remove this id so that there's no
duplicate ids happening
in any of the elements there should be
only one id
okay this one we don't we can't fit the
actual title here we actually need to
make this fit
so in this case we don't need the max
out so we can actually just remove the
class
and just like that we have it just like
that it expands out
just this is exactly what we're looking
for okay
now we just need to swap these out
because they're not in the right order
just like that so let's scroll down say
hello to the future
and then free forever and what we want
to do is start adding some of those 3d
elements
i actually want to have this nice
background that we have created here
and so i've already exported this
background as a png
and the way i wanna i wanna add it is
similar to how we added our
global background which is a fixed
background but in order for me to add it
uh between these two sections i need to
create a wrapper or a diff block
that will contain these two sections
that we have created
so let's go ahead and just do that so we
can have the
background fixed as you scroll only
these two sections which is the
parallax section all right so i'm going
to create the div block
and i'm going to call this div block
section
we could call it section because it's
using the same
idea but instead we're going to actually
just move this over
right about there in this div block
we're gonna drag in
those new two sections with contains
that contains a text
and just like that we have a
section but it's a actually a diff block
so it's just a wrapper
and inside that section we have section
one in section two
but notice how now they're shrinked into
trying to they're trying to fit
the section class which is 100 vh so we
need to overwrite this vh
by creating a combo class so this combo
class is going to be called
looper the reason why i'm calling it
looper is because this effect that we
have here it was created with looper
so i want to use that same name to
reference it
so that section looper we're going to
remove this height
just call it just put in auto it
automatically
expands to fit the size of these two
sections which both are
100 vh that loop
wrapper is containing these two sections
and what i'm going to do is i'm going to
import that background
so let's upload the background pattern
there we go and we want to uh we want to
have that pattern spanned
so cover the whole screen
and make it fixed so that it stays with
you as you scroll down the page
so that's pretty cool that that gives us
a nice a nice effect
the next thing is to start adding some
of those 3d elements
on the side similar to how we did on the
previous lesson with the vr headsets
so we measure back in figma roughly the
size so it's
roughly a square 606 600
by 500 and we got one here 500 by 400
so we can create these two squares
inside the section
wrapper of the looper we're going to
call this
a diff block we're going to just call
this
a 3d cube
we're going to make this size about 600
by 500
i'm going to float this absolute so that
it's on the c
index i'm going to pull it to the top
but again it's going all it's
it's relative to the body so what we
want to do
is make the looper that we just created
relative so let's select that
and make that relative and boom now we
have
our our square our 3d cube is now
sitting over here right so let's add
that background image
and of course now we see that this cube
is
pretty big we can start playing with the
sizing so that it matches a little bit
of what we want to
try to accomplish here so
right there i think that's pretty good
number
we can start also moving the position so
based on the zero percent
this one does not need to be completely
aligned to the center of the text
so we don't need to add the 50 instead
we can just
start playing with the negative values
so just like around there
i think it's good and we can see here
it's
it's a little bit smaller actually so we
might want to
start rescaling this a little bit more
i want to have this actually above so
starting like around here
and as you scroll down it starts to move
down the page
but notice it's actually falling on top
or below
the vr headset so we want to give this a
c index of
about a hundred so that it's actually
sitting
above all of the other elements so that
looks good
right we can repeat the same process now
with the
actual swirl
okay so now we can see that they are
they're based on percentage and because
they're based on percentage this is
going to happen
the screen here is actually
smaller so then they get hidden when we
use percentage modes
so we want to actually change those
values that we created here
so they are actually at pixels
so once we get to the animation we'll be
able to modify some of the
properties of the scaling in the 3d
perspective so right now i'm just making
this default size
a little bit wider
all right now let's bring in the vr
headset the the big vr headset that we
have on our design
we're gonna float it right in between
these two so
right about here is 50
is where we want it to have
okay and this one we're going to max
this out so we're going to give it a 100
width so it expands if it's mobile and
then we're going to max this out to
about 940 pixels
so it matches the size of our overlay
grid
we want to make this position absolute
right now immediately it gets positioned
to the middle
so that's good it's positioned right in
the middle um
on its own
but we want to actually make sure that
we understand how this is doing it
automatically
and if we just simply add here fifty
percent
it's gonna go to the fifty percent of
the starting point of that
asset or that image
we want to do the same thing here with
the 50 of the top
and we just want to offset that based on
the height so
roughly we can measure that by simply
moving this up and down so right about
there
that's where we want it perfect so let's
preview that
wow this is looking good now when we get
to the actual animation
we will have some additional values
changes some changes into the values
that way we can make this actually start
turning
and moving as it scrolls and this one as
well so as you scroll this text will
kind of start animating and we can make
this
feel more like a 3d parallax
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS