Okay, we’ll take it up from where we left off in the first part of this tutorial. We’re keeping the’80s vibes flowing.
First, let’s add a new section underneath the work we’ve already done. Set its height to 930 pixels.
For the background color, we’ll select Gradient in the Color Picker and change the angle to 0.
Let’s customize our color and change the bottom color to this purple shade, and select black for our top color. Giving us this nice gradient.
Next, we’ll add some text elements from our library. We’ll stack them and align the container to the center.
Let’s set the first text element’s bottom margin to 1 percent and the second one’s bottom margin to 5 percent.
Now we’ll align the stack to the center and set its top margin to 10 percent.
Let’s apply a Scroll effect to the stack and choose Arc.
Then, set the animation area start to 5. This defines where the element will be in the viewport when the animation starts and ends.
Time to add visual elements again. We’ll go back to our library and drag more ’80s illustrations across, adjusting their sizes and positions as we go.
Now let’s apply some animations. First, we’ll add a scroll effect to our smiley image and choose Spin. Adjust the spin count to 0.3, scale to 100 percent and animation area to between 0 and 100 percent.
For this cellphone image, we’ll apply a Scroll Expand animation. Adjust its scale to 60, its speed to 0 and animation area to between 10 and 70 percent.
To the calculator image next, and let’s add a Scroll Parallax effect. Set its speed to -0.5.
We’ll also add a Scroll Parallax effect to the compact disc image. We’ll use the same settings as with the calculator.
For our green Tetris blocks, we’ll add a Scroll Spin effect. Set its direction to counter-clockwise, spin count to 0.1, scale to 100 and animation area to between 0 and 100 percent.
Let’s add the same animation to the blue blocks but we’ll give it a slightly different setting and adjust the spin count to 0.3.
Time to add another section at the end. Set its height to 130 and the background color to the purple shade we used earlier.
Let’s drag two more visual elements to the canvas to create this Pac-Man sequence.
Now select the Pac-Man transparent video, align it to left and center and add a scroll effect.
Change the animation path to "From its design" and select Move.
Adjust its angle to 90, its distance to 100VH and the animation area between 0 and 100 percent.
Next, select the dots image. Again, add a scroll effect. Change the animation path to "From its design" and this time choose Reveal.
Let’s tweak the effect’s movement. Adjust the direction to "To the right" and the animation area to between 0 and 95 percent.
Finally, add a new section and set its responsive behavior to Fit to Screen, which will give us some space to scroll into our design.
Okay, it’s time to check the outcome of all these small changes we’ve been making. Let’s go back up top, hit preview and scroll to see the results.
And there we have it, our scroll experience in full flow giving us the ’80s vibes we’re looking for.
For more tutorials like this one and to learn what you can do with Wix Studio, check out the Academy.
.png)