Footer Reveal Animation is a small jQuery script that tracks scrolling events and divulges the footer content with custom CSS3 animation as you scroll to the bottom of the web page.
Must Read: jQuery Plugin To Show Reveal Text With Fade Effect | reveal-it.js
Footer Reveal Animation Details
Post Name | Footer Reveal Animation |
Author Name | Afarah92 |
Category | Animation Plugins, Codepen |
Official Page | Click Here | Click Here |
Official Website | github.com |
Publish Date | November 3, 2020 |
Last Update | July 1, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
1. Add a footer part to the webpage.
<main> Main Content </main> <footer> <div class="reveal"> Element To Reveal On Scroll </div> </footer>
2. Apply a reveal animation to the footer aspect.
footer .reveal { transform: translateY(50px); opacity: 0; transition: transform, opacity; transition-duration: .8s; transition-timing-function: ease; } footer .reveal.show { transform: translateY(0); opacity: 1; }
3. Load the required jQuery JavaScript library.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
4. The JavaScript to animate the footer aspect when it’s scrolled into view.
var revealElement = $('footer .reveal'); $(window).scroll(function() { if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { $(revealElement).addClass('show'); } else if($(revealElement).hasClass('show') && $(window).scrollTop() + $(window).height() > $(document).height() - 150) { $(revealElement).removeClass('show'); } });
See Demo And Download
Official Website(Afarah92): Click Here
This superior jQuery/javascript plugin is developed by Afarah92. For extra Advanced Usages, please go to the official website.