Using the “Parallax” feature when building your website can help you create dynamic and unique designs.
This feature can be used on various elements, and in this ‘how to guide’ I will show you how to apply it to your “Image” element, in order to recreate this cool scroll animation:
Before starting with the actual process, here’s what I am using in this tutorial:
- a PNG image that covers the full width of the screen
- a pre-built landing page from the Kwik theme
So let’s jump right into the process:
Add the Image to Your Template
After loading the landing page template, open the right sidebar list of elements:
Drag and drop an “Image” element onto your canvas and select the PNG file from the media library:
After the image has been added, you can use the left sidebar options of the element if you want to make any changes at this stage:
Clear the Color Selection
The next step in the process is to remove the background (if any) of the elements located above and below the image. This way you can get this overlapping effect between the PNG image and your other elements from the page:
In this example, I have two “Background Section” elements located above and below my image.
Click on the “Background Section” element located below the image and access the “Background Style” section of the left sidebar:
Here, you need to make sure that you clear the color selection that’s currently applied to this element.
For that, click on the color field:
Unlink from the theme color:
And now simply clear the color selection with one click:
You will notice that the “HEX / RGB” and “Opacity” values have been removed. Lastly, don’t forget to apply your changes:
Do the same with the second “Background Section” element, located above the image.
Select it and access the “Background Style”:
Check if there’s a color selection applied to it. In this case, there’s no color, so no additional action is required here:
Set the “Top” and “Bottom” Margins
The next step in the process is to adjust the vertical position of the image. Click on it to access the left sidebar options:
Expand the “Layout & Position” section:
And here, access the “Advanced” settings:
Change the unit from “PX” to “%”:
By doing this, you are making sure that the element will be scaled proportionally in relation to another object around it, when viewed on a smaller screen.
Add a top margin of “-30” and you will see that the image is now overlapping with the background section from above:
Next, add a bottom margin of “-50”, to make it overlap with the background section located right under it:
This is the moment where you can check how the image would look on smaller screen size and make adjustments if needed:
Note: On mobile, for example, I’ve added negative top margin of “-70” to the image, to make the elements overlap more:
Apply the Parallax Effect
With your “Image” element still selected, click on the “Scroll Behavior” section of the same left sidebar:
Here, click on the “Parallax” option, which will trigger a new set of options:
Next, click on “Add New Effect” and make sure the “Vertical Scroll” effect is selected in the first drop-down list:
In the “Type” drop-down list, select “Down”:
Lastly, apply your changes:
While in this view, you are able to preview the effect by activating the “Parallax Preview” toggle. When you want to return to the main editor, click on “Done”:
Up until this point we have a PNG image that has a parallax effect applied to it, so that it moves along with the scroll:
But what you can also notice in the above example, is that the PNG image is covering some of the visual elements from the background section placed above it. That can be easily fixed by tweaking the “Z-index” values of the background section.
If you are unfamiliar with these settings, then this article from our knowledge base might be useful to you:
Set the Z-index Values
To set the “Z-index” of the “Background Section” element, make sure the element is selected and then access the “Layout & Position” options:
Here, increase the value of the “Z-index” to at least “10”. As soon as you do that, you will notice that the elements of the background section will be displayed on top of the PNG image:
Usually each element that has this feature comes with a predefined “Z-index” value of “3”.
So, by increasing the “Z-index” of the background section, you are making sure that it will be on top of the image, due to the fact that it has a higher value than the default index of the image.
Customize the Typography
Lastly, you might want to modify the typography or various text elements that are overlapping with the image, to make them more readable.
I’ve selected the ones that needed adjustments, and simply added a highlight to them, in the same color as my theme color:
Once everything is fully customized, you can preview your page to see how it would look like to anyone that lands on it:
As always, the above steps might need minor adjustments depending on the image and templates you are using. This is just an example of how you can use this feature on your website, to animate your layout and draw the eye towards certain areas of your pages.
I really hope you found this guide useful. Make sure to rate it with a smile below if you want to let us know that as well 🙂
Lastly, don’t hesitate to check out other tutorials of this type available in our knowledge base!