Looking forward to add a smooth background color change effect on WordPress website? Well, these days, most of the popular websites have background color that transitions automatically from one color to another. This beautiful effect will allow you to attract attention of users and boost engagement on your blog/website.
Now the question is how to add this effect on WordPress site?
Here’s how you can add the effect on your site:
The Process
Start with finding out CSS class of the specific area you wish to change. This can be done through the ‘Inspect tool’ available in your browser. You just need to take your mouse to the specific area you wish to transform. Now right click and select Inspect tool.
Find CSS class
The next step is to note down the CSS class you wish to target precisely. For instance, if you wish to target the widget area in the bottom having ‘page-header’ (CSS class), simply open a plain text editor on PC create a new file. You must save the file on desktop as:
wpb-background-tutorial.js on your desktop.
Now add the code stated below in your JS file:
[alert-note]jQuery(function($){
$(‘.page-header’).each(function(){
var $this = $(this),
colors = [‘#ec008c’, ‘#00bcc3’, ‘#5fb26a’, ‘#fc7331’];
setInterval(function(){
var color = colors.shift();
colors.push(color);
$this.animate({backgroundColor: color}, 2000);
},4000);
});
});
It is important that you use the CSS class you wish to target within the code. Here, around four colors have been added. So the effect will start from the first color added and transitions to the subsequent color. The process will keep pedaling through these colors. Make sure you save your changes to this file.
The next step is to upload wpb-bg-tutorial.js file to the following folder of your WordPress theme:
/js/ folder using FTP
In case, your theme does not have this folder inside, it is time to create a new one.
Upload Javascript File
Once you successfully upload JavaScript file, load it in WordPress.
Here, you must add the code mentioned below to functions.php file of your theme.
[alert-note] function wpb_bg_color_scripts() {wp_enqueue_script( ‘wpb-background-tutorial’, get_stylesheet_directory_uri() . ‘/js/wpb-background-tutorial.js’, array( ‘jquery-color’ ), ‘1.0.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘wpb_bg_color_scripts’ ); [/alert-note]
The above stated code will load JavaScript file in correct manner. It will also load the dependent jQuery script that you require for the code to function well.
It is now time to visit your website and watch the action. The smooth background color change effect can be seen in the area you had targeted!
There are a number of other ways to use background colors in WordPress for attracting attention of user. These methods will also help your website/blog content pop-out. You may try out any of the following:
– Add fullscreen video backgrounds
– Add fullscreen background images
– Random background colors on each page load
– Style individual posts with different backgrounds
– Add parallax effects to any WordPress theme
Hope this information helped you to learn how to add smooth background color change effect in your WordPress website or blog. If you are looking for professional assistance for the same, look for WordPress Developer for hire online. You would benefit from valuable tips and sources for the same.
0 Comments