Setup Parallax in Webflow

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

‍