Fadeup Effect is a popular animation used in modern themes these days. It essentially adds a delay effect to specific containers within your theme, making theme load slowly.
In Genesis, the Fadeup effect has been in popular child themes including Infinity Pro, Digital Pro, and Monochrome Pro.
Here’s Fadeup Effect in Action in Infinity Pro theme.
In this tutorial, I’ll walk you through the process to create fadeup effect in any Genesis child theme.
Before we start, I’d like to give you two different options.
Option #1: In this scenario, you’d like to add fadeup effect to your main container. It doesn’t require any script. Only add some code to functions.php and style.css.
Option #2: In this scenario, you’d like to add fadeup effect to specific containers (such as widget sections on front-page). Here, you will need to add script to your js folder apart from enqueuing it from your functions.php. Moreover, you will need to add a class to your registered widgets, and finally, add the css code to style.css.
So depending on your animation goals, you can follow either of these methods required for your project.
For this blog, I’ve used the Option #1 method. You can refresh this page, and see it in action.
Okay, let’s go ahead and see how to crate fadeup effect in Genesis child themes.
Fadeup Effect in Site Container on Page Load
Add a Class to Site Container
Add the following code snippet to your functions.php file.
Add CSS Animation
Add the following code snippet to your style.css file.
Reload your page, and see it in action.
NOTE: Did you know you can add css classes and attributes to any html elements in Genesis? You can animate practically any section of your Genesis site following the above method for animation. Here are some more code snippets to help you with your creative juice. Just remember to make appropriate changes in your css changes.
Neil Gowran from WP Beaches has a very useful list of table containing majority of the contexts and their corresponding filter names if you’re super curious.
Fadeup Effect in Front Page Sections on Page Load
As explained earlier, this method will take four steps (or fewer).
Step #1: Create a fadeup.js file inside your child theme’s js folder, and add the following code
Step #2: Open your functions.php file and add the following code where other scripts and styles have been enqueued.
Step #3: Either add a class to your existing registered widgets or create/display a new widget as shown below.
If you don’t have a front-page.php, you want to add the above snippets inside your functions.php.
Step #4: Add the following code snippet to your style.css file.
Reload your front page and see it in action.
That’s all. Hope you find this useful.