How Do You Change Scrolling Color Menu Using Parallax In WordPress?

How Do You Change Scrolling Color Menu Using Parallax In WordPress?
Spread the love

One question which is asked by the people related to WordPress is: “How do you change scrolling color menu using parallax in WordPress? Today, we are going to discuss this topic so people will get the solution to their problem.

What is WordPress Parallax Effect?

Actually, the parallax effect is a modern technique in web designing in which the background element scrolls slower than the foreground one. This effect creates an illusion of depth to the page and gives content a 3D effect when users scroll down the page.

Most often, this effect is used on the home pages, landing pages, or any other page where there are broken sections. It is most suitable on single-page websites where users are encouraged to scroll down the page.

The majority of the paid WordPress themes come up with a built-in parallax scrolling effect. But if you need to add this effect manually, there are several WordPress plugins to add this effect on your website.

How Do You Change Scrolling Color Menu Using Parallax In WordPress?

One method is to use a WordPress plugin to add a parallax effect.

Using Free Advanced WordPress Backgrounds Plugin

If you have installed a theme that doesn’t have a built-in parallax effect option then you still have the chance to add it to your pages manually. Advanced WordPress Backgrounds (AWB) plugin permits you to use parallax scrolling with images and videos. It comes up with Gutenberg and WPBakery Page Builder support. The best thing about this plugin is that it is lightweight plugin with a lot of features and will not slow down your website.

advanced wordpress backgrounds plugin (How do you change scrolling color menu using parallax in WordPress?)

FEATURES

  • Background Types:
    • Color
    • Image
    • Pattern Images
    • Self Hosted Video
    • Youtube / Vimeo Video
  • Parallax options powered by high-performance JavaScript plugin Jarallax
    • Custom speed option
    • Enable / Disable for mobile devices option
    • Scroll effect
    • Opacity effect
    • Scale effect
    • Scroll + Opacity effect
    • Scroll + Scale effect
  • Mouse Parallax
  • Custom video start & end time
  • srcset supported (i.e. Google love it)
  • Overlay color with transparency options.
  • Stretch option. Will be useful on boxed websites.
  • Visual shortcode maker. You can create a shortcode using the visual builder.
  • Gutenberg supported
  • WPBakery Page Builder supported (extended row and col options + separate shortcode)
  • Custom CSS offsets (paddings + margins)

How Do You Do Parallax Scrolling In WordPress? Or How to Add a Parallax Effect in WordPress? (With Plugin)

1. Install Advanced WordPress Backgrounds Plugin

For the installation of the AWB plugin, jump to plugins > Add New and search “Advanced WordPress Backgrounds“. After that, you will see the results as shown below:

plugin installation

Click on the “Install Now” button, then AWB will start installing and you will need to activate it after installation. Now, you are ready to use it for the first time and apply different awesome effects on the pages.

2. Edit Any Post or Page

Using Gutenberg Editor:

Advanced WordPress Backgrounds is fully compatible with the Gutenberg editor. It has its own custom block where you can select any image or video from Media Library and position the effect on the page.

AWB Gutenberg Editor

In the block section, you have the option to select an image, video, or any solid color which you want to set as a background. Choose an option and after that select image or video from the Media Library which you want to apply to the background.

AWB Block

Below these, you will see the options to choose the behavior of effects. Rather than the more traditional parallax scrolling effect, you can also opt to have the scale and opacity change of the background image when a user scrolls down the page. The function enables you to have better control over how the effect behaves on scrolling. You can also turn off the parallax effect for mobile devices, which then relies on swiping instead of scrolling for navigation.

parallax effect scrolling behavior

In the end, the last option is to enable the mouse parallax option. Enabling it will add an effect that can be controlled by moving the mouse rather than scrolling it. Here, you have the options to adjust the size and speed, which identify the time and intensity of the scrolling effect.

mouse parallax options

Using Classic Editor:

AWB uses a shortcode to apply the parallax effect on the background in the classic editor. To use this plugin in the classic editor, you need to edit any post or page. When you open the editor, you will see a new icon of Advanced WordPress Backgrounds on the right side of the Toolbar. Click on the AWB button.

AWB Classic Editor

After clicking on the button, a pop-up window will appear with all the available options to choose from for the effect. To use an image, first, select the image as background type and then check the stretch option.

AWB Pop-up

The above image shows how the pop-up window looks like. As you can see, the options are similar as we have already seen in the AWB block in Gutenberg editor. Select the image which you want to set on the background. Makes sure the image is large and of high-quality, otherwise, the image will not appear in the background.

Then in the parallax section, you can select the effect behavior such as scroll, scale, or opacity and also the speed of the effect. You can also uncheck the effect on mobile devices. After choosing all the options, click on the insert button. Then, AWB will insert a shortcode in the post which will look like this:

[nk_awb awb_type=”image” awb_image=”123″ awb_image_size=”full” awb_image_background_size=”cover” awb_image_background_position=”50% 50%” awb_parallax=”scroll” awb_parallax_speed=”0.5″]

Your Content Here

[/nk_awb]

Instead of “Your Content Here”, replace your actual post content and that’s all. You have successfully done it.

How Do You Add Parallax Effect Using CSS? (Without Plugin)

If you have a knowledge of HTML and CSS, you can also add a parallax effect using CSS without installing any plugin. But If you don’t have the coding experience, I recommend you don’t take risk of that because If you mistakenly place the code in the wrong section, you may damage your website.

1. Upload Image To Media Library

The first step is to upload the image into your WordPress Media Library which you want to use in the effect. After uploading, click on the image and find the “File URL”. Click on the “Copy URL to clipboard” to copy the image URL to use in the CSS code.

WordPress Media Library (How do you change scrolling color menu using parallax in WordPress?)

2. Add HTML into Post or Page

Now is the time to add the parallax effect to your post or page. You need to add the following HTML code into your post where you want the effect to appear. In Block Editor, you can do it using a custom HTML block. If you’re using Classic Editor, you can place the following code in the text editor:

<div class=”parallax”>

<div class=”parallax-content”>

Your content here

</div>

</div>

Replace “your content here” with your whole post’s content ( or page’s content). To see the effect, we have to complete one more step which is adding CSS code to your theme.

3. Add CSS Code To Theme

In this last step, you will need to add some CSS code lines into your theme files to run and see the effect. You can do it either by using Theme Editor or by placing the code in a built-in CSS editor.

.parallax {

background-image: url(“Your Image URL Here”);

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;

}

Replace “your image URL here” with the URL of the image which you earlier uploaded and copied to use in the effect. That’s all, you’re ready to check out the effect on your post or page.

 


Spread the love

About Technical Master

The Technical Master is a platform created to give knowledge of all about the world of the Internet, Technology, Digital Marketing, Online Earning, and much more to the people of our community.

View all posts by Technical Master →

Leave a Reply

Your email address will not be published. Required fields are marked *