This animated design with a parallax effect can add movement and
depth to your sites and make them really stand out!
Let’s recreate it...
Feel free to build along
We’ll start by giving our section a height of 670 pixels.
Now, let’s give our background some movement with a video.
From the Add panel, choose a video box and drag it to the canvas.
Now go to the Inspector panel and turn on Advanced settings.
To make the video fill our whole section, set it to
100% width and 120% height.
We want our video to be constantly running, so we’ll go to Behaviors,set it to start automatically, play without any
pauses, and loop when it ends.
Awesome!
Next, we’ll add our headline image...
I’m using this one.
Resize it, and position it how you want it i'll cent-ter mine
To create our header, we’ll add a title and customize it.
I’m using Verdana, but go with whatever font you like.
I’ll resize it to 24 pixels.
Now we’ll duplicate it twice and edit the text.
Position the elements to the top left and then align them.
We’ll also stack them to make sure they stay in the right place for
different breakpoints.
Great!
Now onto the footer.
Let’s add another title to the left side and
customize our font, size and color.
Like with our header, we’ll duplicate it twice more, position the
elements on the left, and adjust the text and sizing.
Finally,..we’ll stack these elements too.
Now let’s add our car image from the Add panel.
Resize it by dragging from the corners and position it.
Mine will be in the center.
Next we want to place our image inside a container.
We’ll need this to add our animations!
Finally, select the footer and choose to bring it to front so it
Won’t be hidden behind our car image.
Awesome!
Let’s start animating now.
We’ll open the layers panel and select our car image inside the
container we just created.
We’ll add a mouse effect.
Then choose Track 3D.
Click on adjust animation, and the settings I’ll use are: 23 for
angle, 650 pixels for distance, 0.7 for speed and 2.6 for perspective.
For its movement axis, I’ll choose horizontal, so it will only track
our mouse movement horizontally.
Now, go back to the layers panel and select the image’s container.
Here, we’ll add a loop animation.
And choose Breathe.
In adjustments, I’ll set the values to vertical, 15 pixels distance
and 0.4 duration.
Click Preview and we can see some nice movement of our car.
Lastly, to add the moving cloud element to our design, go to Add
Elements and select Transparent Video.
Once it’s added, select it and turn on Advanced settings.
To make it move all the way out of screen and in again, set the
sizing to 150% for both width and height.
Finally, to add even more character to our site,
Let’s change our cursor image.
I’m going to add this pink steering wheel.
Okay, let’s preview the full page.
Our animations look great!
And, we did it all in only a matter of minutes.
