Making Parallax Scrolling Work for You
There are many ways to make your web design look impressive while also making it great for presenting information and guiding visitors through a fantastic user experience. Parallax scrolling is a powerful way to make your website a lot more engaging and aesthetically pleasing through CSS.
As a web designer, you’re likely proficient in Cascading Style Sheets, the coding language that augments HTML and makes your web pages look nicer and more organized, letting it better convey your message.
Let’s take a look at how to create a parallax scrolling effect for your web design, what it can do for your web design, and why you should try it for your website.
What is Parallax Scrolling?
Parallax scrolling is basically when the background and foreground move at different speeds while scrolling. For those who can remember retro side-scrolling platforming video games, they may have seen this effect in action.
For web design, it’s basically a technique that lets you create a sense of depth by making the background and foreground move at different speeds. When done right, it can produce a jaw-dropping visual effect that will leave your audience in awe. It can make your website look and feel more premium and professional.
Creating Parallax Scrolling in HTML/CSS
Doing it does take a good bit of finangling with the HTML and CSS code of your website. Using CSS to create the effect keeps things simple and manageable, and there are two major ways to do this.
1. Container and Image Height
The first part of this is to create a container element and have it use this property: “background-attachment: fixed”.
You may also use other background properties like centering and scaling the image to add more styling.
.yourbackground { background-image: url(“image.png”);
* Set the height */ height: 400px;
/* Create a parallax effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover; }
You then set the max height of the image. Aside from setting a specific height in pixels, you can also set it to 100%.
This is how you create your background container on HTML.
<div class=”yourbackground”></div>
One thing about “background-attachment: fixed” you must know is that it tends to cause problems on mobile. This can be fixed easily with a media query.
2. Page Wrapper and Static Section
This works in the same principles as the previous one, but it uses a page wrapper and a static section. The wrapper has the perspective and scroll properties for the whole page, while the static section serves as the background.
The background image is to have the ::after pseudo-element, as well as the transform element required for the parallax effect.
Section contains the size, display, and text properties that are not usually relevant to the parallax.
.wrapper {
height: 100vh;
Scaling images this way will add a horizontal scrollbar, so you’ll have to disable overflow-x to prevent it.
overflow-x: hidden;
overflow-y: auto;
Putting overflow-y to auto makes sure that viewers can still scroll up and down to see all of the web page.
You then add 2px to the distance between the transformed objects and the viewpoint.
perspective: 2px;
}
.section {
position: relative;
Setting position to relative creates absolute positioning between the parent and child elements.
You then set a specific height on the container, and the value can be whatever you want.
height: 100vh;
/* For text formatting. */
display: flex;
align-items: center;
justify-content: center;
color: blue;
text-shadow: 0 0 5px #666;
}
Set the position and display for the pseudo-element.
.parallax::after {
content: ” “;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
After this, you must move the pseudo-element away from the viewport, then scale it back up to fill the viewport.
Background-size makes the image fill the entire element, while Z-index makes sure that similar elements don’t overlap. After this, you can then set the background images.
This is just one of the ways to create a parallax scrolling effect in HTML and CSS, but it covers most of the basics. If you’re using a content management system like WordPress, it offers easier ways of doing it.
Creating Parallax Scrolling in WordPress
WordPress allows for parallax scrolling in various ways, either by coding it into your website, installing a free parallax scrolling theme, or installing a dedicated plugin. WordPress is flexible and highly customizable, letting you choose either one of these options with great results.
The coding option allows for the most flexibility as it allows you to do parallax scrolling however you think fits your web design and finetune it later on. But if you’re just looking for a quick solution, tweaking a theme or installing a theme will do, although it may slow down your website.
Adding Parallax Scrolling in WordPress Using CSS and HTML
You can add parallax scrolling to all your pages with a simple and hassle-free way.
In the theme editor, find the file you want the parallax background image to be. Decide on whether you wish to add it on the header, footer, or center of the page.
You can then add the following code:
<div class=”parallax”></div>
Upload your parallax background image to your media library and save the image URL.
Add the following code to your CSS under the Appearance > Customize > Additional CSS page:
.parallax {
background-image: url(“image.png”);
height: 400px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Remember to replace “image.png” with your background image URL.
Find a Parallax Scrolling Theme
If you’re a web designer looking to create your own WordPress theme with parallax scrolling, you likely wouldn’t just find one online and pass it off as your own. However, you can reverse engineer it to see how it works for that particular theme and base your own theme after it.
These themes come with built-in parallax scrolling functionality, building on top of the code you see in the previous section as a foundation. They may have additional effects that you want to learn from.
But if you’re just someone looking to spruce up your WordPress site, then you may find a theme with parallax scrolling to be quite the visual upgrade.
Install a Background Parallax Plugin
You can harness the power of WordPress plugins and install something like Parallax Image or Advanced WordPress Backgrounds to turn your static background into something more spectacular.
These plugins provide a parallax effect with a simple shortcode you can add to your content. What makes them even more powerful is that they’re compatible with major WordPress page builders like Elementor and WPBakery.
Conclusion
Now that you know how to create parallax scrolling for your website with CSS, you can play around with it and come up with cool ways to incorporate parallax scrolling in your web design. It’s recommended that you try it out on a staging site first before implementing it in your actual website.
Remember that just like with everything else in web design, you should only implement parallax scrolling if it adds to how your website tells a story to engage the audience and make them go along with your calls-to-action.
