Adding a footer reveal effect to your website can enhance its visual appeal and provide a modern touch to your site's design.
This effect ensures that the footer smoothly slides into view as the user scrolls to the bottom of the page, creating a dynamic and engaging browsing experience.
This article will walk you through the steps to create a footer reveal effect using simple CSS and JavaScript. Follow our guide to add this sleek feature to your website and impress your visitors.
Go to Divi → Theme Builder and create a Footer layout. This could be a Global Footer or a Footer layout assigned to a specific page.
Edit the section that contains all the footer information and go to Advanced Tab → CSS ID & Classes → CSS Class and input divi-site-footer-section.
Go to Advanced Tab → Position and set its position to Fixed
Use the Location option and set the position to be Bottom Centered
Go to Divi → Theme Options → General Tab → Custom CSS and add this CSS code:
#page-container:has(.divi-site-footer-section) #main-content{
z-index: 2;
position: relative;
}Go to Divi → Theme Option → Integration tab → Header and add this JS code:
<script id="divi-reveal-footer-effect">
(function ($) {
function diviCalcFooterHeight() {
var footerHeight = $('.divi-site-footer-section').outerHeight();
$('#main-content').css('margin-bottom', footerHeight);
}
$(document).ready(function () {
diviCalcFooterHeight();
});
$(window).on('resize', diviCalcFooterHeight)
})(jQuery);
</script>
You can see the result in the below GIF:
