Build along to create an interactive section with a mouse parallax effect

Mouse parallax is such a fun way to add instant depth and interactivity—like here, where the discs swivel around with my cursor. I’ll show you how to recreate it. Feel free to build along.

We’ll start off with a blank section. In the Inspector panel, I’ll apply CSS grid.

Let’s make it 4 columns and 3 rows.

Next, I’ll go to my site files and add my first image…let’s choose this one.

From over here I’ll move it into the top left cell.

In the settings, let’s change it to keep the image ratio.

I’ll set the width to 100%. I have advanced sizing enabled here—if you don’t, just go ahead and toggle it on first.

Now we want to set the sizing for this first grid row. We’ll make the height max content, so the row height is based on the height of our image.

Alright, let’s add the next image—this gray disc.

This one goes in the second row, third column.

Change the same setting as before to keep the image ratio.

…we’ll get rid of this margin…

…set it to 100% width again…

…and also make this row height max content.

Now we’ll design this gray disc a bit more. I’ll grab this circular text SVG and put it here on top of it.

We’ll set it to 100% width. Then go to the settings to make sure it keeps its original proportions.

I’ll also change the height to 100%...

…and fine-tune a little.

Okay. Next we’ll add a loop animation to this text.

Let’s choose Spin, and we’ll adjust it.

We’ll increase the duration to slow it down. [pause] That’s better.

Okay, I’ve got one more element to add to this part of the design. This mouse image.

It’ll go right here over the disc and text.

Let’s keep the ratio,

…change the size. Good.

Alright, let’s select all three of these and place them in a container.

Cool. I’m going to speed things along here and drop in the rest of my elements and adjust their properties the same way we’ve been doing. [Pause]

Done. Now for the good part–let’s add the effects. Starting with this container, we’ll add a mouse effect.

We’ll choose Tilt 3D.

Now I’ll choose another image and add the same effect again.

We want the angle at 41 degrees, and the velocity at 1. And I’ll  just repeat that for all the other discs.

Cool, so here’s how it looks now…we’ve got them all following the cursor. Nice.

Finishing touches here, we’ll change the background color.

And add a background image as well.

And we’re done. Let’s take a final look. [pause] Pretty cool, right?

Thanks for watching. Catch more tutorials like this in the Wix Studio Academy.