How to Add Parallax Scrolling Effect to Your WordPress Blog?

Parallax scrolling effect, as fancy as it sounds, is in-fact much easier to add to your WordPress sites or blogs.

Chances are, you are on this blog in the first place because you have bumped into parallax scrolling effect before and want to try it yourself.

The more demanding it seems, the easier it is to implement. Let me walk you through parallax scrolling effect right away.

What exactly is Parallax Scrolling?

Parallax scrolling is a modern web design technique that occurs when the foreground and the background in a webpage races at a different speed. It creates an interactive scrolling effect and depth to background images.

The background remains fixed while foreground elements glides on top of it creating a seamless visual experience to the users.

Why should you use the Parallax Scroll effect in WordPress?

While it is not mandatory to implement parallax scrolling effect in your WordPress site, it can certainly give you an aesthetic edge over your competitors. Adding Parallax Scroll effect to your WordPress site can arrest user’s attention and make your website more engaging.

Parallax scrolling effects can also add context and relay your information in a visually interesting and dynamic way. Overall, implementing parallax background can benefit you by enhancing your user’s experience.

How to Implement Parallax Scrolling in your WordPress with Plugins?

Using Plugins

The easiest and fastest way to add Parallax scrolling without typing a single line of code is by installing and activating the required plugin.

It is recommended for beginners who wants to bypass the hassle of manually coding.

There are multiple plugins at your disposal that you can use to create parallax effect in your WordPress post or page

Using Advanced WordPress Backgrounds plugin.

First, head to WordPress dashboard.

Navigate to Plugins >> Add New. Search for Advanced WordPress Backgrounds in the search bar.

Navigate to the searched plugin and click on Install Now. After that, activate the plugin.

Now that the plugin is installed and activated, let’s use it in our editors.

The approach for implementing Advanced WordPress Backgrounds slightly differs in Old Classic Editor and Gutenberg Block Editor.

Implementing Advanced WordPress Backgrounds in Old Classic Editor

Navigate to the post or page where you want to add the Parallax effect.

First, place the cursor on the section of the post or page where you want to add Parallax background effect.

Click on the Advanced WordPress Backgrounds Icon located at the menu of the editor

You will directed to the popup of AWB shortcode as shown below where you are required to make edits to default settings.

Click on the drop-down menu under Background Type and select Image.

Under Image Tab, select and upload your required image for creating parallax effect.

Under Parallax >> Type Section, select any parallax type based on your preference from the drop down menu.

Note: You can also make use of Overlay Color, which is a filter which puts a tint on your browser viewport to make text more readable. This could be used by people suffering by visual distortions when reading the content on a normal background (Scotopic Sensitivity Syndrome)

After you have configured your settings, click on Insert button, and you are set to go.

This is what your editor looks like after you click the Insert button.

Now all you have to do is replace the highlighted “Your Content here” with any piece of text you would like to add to implement the parallax effect.

Warning: Be extra cautious while configuring your settings for creating your parallax effect; once the short code is inserted in your editor, you can’t reverse or configure any settings.

If you have to make any changes afterwards, you have to delete the generated short code entirely and again configure your settings from scratch.

Using Advanced WordPress Backgrounds in Gutenberg Block Editor

Head to your posts or pages where you want to add parallax scrolling effect by navigating to Posts >> All Posts or Pages >> All Pages.

Now place your cursor in the WordPress editor at the exact position where you want to add a parallax background. Then click on + icon.

Search for AWB in the pop-up search bar.

An AWB block is created.

Click the area just close to it’s border to select the block, as shown below.

On the side panel, under the Block tab, click on Image, and select image of your choice where you want to implement parallax scrolling effect.

Under Parallax Section, Click the drop-down menu and Select to Scroll, which is disabled by default.

After you have added the image, now to write text over the background for scrolling parallax effect, Click on the plus icon in between the block.

Now you can add a paragraph or heading block as per your requirements. And add your texts accordingly.

Click on Update after you are done with the edit and changes.

Preview the changes to gauge if you have obtained your desired parallax effect or not. If not, you can configure the settings accordingly.

Adding parallax scrolling effect via Gutenberg editor is much easier in contrast to Old Classic Editor as it allows you to reverse any changes made or configure your settings again once you have already implemented it.

You don’t have to risk starting from the scratch if you are unsatisfied with the settings of scrolling effect. You can always choose to configure it.

How to add Parallax Effect manually to WordPress without Plugins?

Chances are you have already installed a lot of plugins to your wordpress sites and you don’t have room for more plugins , else you will end up bloating your wordpress site and slow it down. What’s the fix?

Well, you can always implement parallax scrolling effect manually. Just copy and paste few lines of codes in your theme files.

Let’s begin.

Upload image in WordPress Media Library.

First upload your parallax scrolling background you want to use in your wordpress page or post.

Head to wordpress media library by navigating to Media >> Add New. Upload your image files there.

Add Custom HTML to your WordPress post or page

Navigate to the post or page where you want to add parallax scrolling background effect.

Then, select a block inside that page or post, click on + icon, search for Custom HTML.

Copy the below HTML code and paste there in custom HTML section.

<div class="parallax">
  <div class="parallax-content">
        Your content here
  </div>
</div>

Replace the “Write your content here” with any content you like to display over parallax background.

Add CSS to your wordpress post or page

There are 2 ways to add CSS to your WordPress posts or pages.
You can either add the CSS code directly to your theme file editor or you can use customizer to add CSS code to you required posts or pages.

Adding CSS directly to Theme File Editor

Navigate to your Appearance >> Theme file Editor. And copy and paste the CSS code into your style.css file.

Note: We don’t recommend you make direct edits on your theme files. You must create child theme and make edits there so that you won’t lose your edits when you update the theme itself.

CSS code

.parallax {  
background-image: url("https://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
 
.parallax-content { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
} 

Adding CSS file via Theme Customizer

While the above method might not work for every themes, you can always rely on Theme customizer to add the required CSS.

Navigate to Theme >> Customize.

Now select the post or page where you to want to add CSS styling code.

Scroll down until you find Additional CSS section.

Then, copy and paste the above CSS code there. Click on Publish to see the result.

Note: Don’t forget to change the background URL. You can also make any CSS styling changes here.

How to add Parallax Scrolling Effect with Gutenberg Block Editor?

The easiest way to add parallax scrolling effect is by using the inherent features provided by Gutenberg Block editor.

Upload an image block withing your wordpress posts or pages. Navigate to the wordpress post or page, where you want to implement parallax background.

Then, within that page or post, click on + icon to add new block.

Search for Image in the popup.

Upload your preferred image for the parallax background.

After uploading your background image, click on the image block, a new list of menu appears at the top of the post or page.

Then click on icon in between the crop icon and apply duotone filter icon.

Add your text over the image.

Click on the outer Image block. Under the Block tab at the sidebar, navigate to Media settings.

Now, Toggle on the Fixed Background to create an illusion of parallax scrolling effect.

Instead of adding Image block and then adding text over image, you can directly add Cover block and toggle on the Fixed Background settings under Block tab.

You can configure others style settings under Block Tab according to your preference.

This is how your parallax scrolling effect looks like.

Conclusion

Congratulations! You have made to the end. Now, you can arrest user attention and enhance their experience by implementing parallax scrolling effects in your WordPress posts or pages easily