On this Webflow lesson we take a look at viewport y-axis interactions. How to create mouse move over element animations using Webflow and when to use Webflow's mouse Y actions.
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!
okay so the first thing i'm doing here
is just adding some rotation
to the card itself and
adding the self perspective setting so
i'm going to repeat that process over
with this
other card and as you can see i'm just
playing around with the self
perspective to see what works
the second thing i'm adding here is just
the the play icon
that we have in our design from our
previous course
so this play icon is just centering it
position absolute we are going to be
using
margin offset to to make sure that it's
completely centered
[Music]
i'm just polishing up some of the
borders around this
card where the clip is so we're just
adding some box shadow
so it doesn't affect or push our
elements away
just adding some very slight and subtle
opacity into that border
and that looks a lot better
next i'm just quickly adding some of the
drop shadows
just to give that extra layer of depth
into each of these cards so there's a
shadow falling on top of the clip card
right behind
so right in the middle
we're going to select the sections so
the section is going to be
our point of reference for the mouse x
movement and the mouse y movement and
right away what i'm doing is i'm
selecting
the flex container which has actually
the features
combo class if you notice there i'm
actually
just playing around with the x-axis
first and rotation on the y-axis so i'm
putting up a little bit of the degrees
20 and 20 and look how nice this
rotation works
we're going to duplicate that same
effect but we're going to actually use
the x
axis now on the mouse y movement
and you can play along with this but
then what it's doing is actually making
it super
super interactive now it's both axes
so both on the y and the x axis
and finally what i want to do is how 3d
usually works is based on
light and reflection i wanted to add a
little circle
where as you move your mouse around that
could be
kind of like an illusion of a light or a
key light hitting down on these cards
and you can do this simply by adding
that circle adding some blur
making the background in white and
border radius we can add a very nice
effect
without having to export a png image
and notice what i'm doing here i'm
adding the same interaction i did
but now i'm doing the opposite so if i
move my mouse over to the left
the light moves to the right and it's
almost that nice effect
as if we were in a 3d space
we do the same thing on the y-axis and
there we go
we have this really cool effect almost
like a sphere as you move your mouse
around
and it looks pretty cool great guys i'll
see you in the next lesson
so we can take a look at the parallax
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS