html-to-script

Footer with Content Scale using HTML to Script plugin

Download HTML-to-Script Plugin

Scale the page content with a zoom out effect on page scroll when nearing the footer.  In this example, we will be scaling the inner column of the section of which we’ve assigned the #main_content id.

This is achieved with the following css to the page css:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
body, html {
    max-width: 100%;
    overflow-x: hidden;
}
div[data-elementor-type="wp-page"] #main_content {
    transform-origin: center bottom 0px;
    transition: all 0.5s ease 0s;
    box-shadow: 0px 22px 54px rgba(0, 0, 0, 0.5);
    opacity: 1;
}
body.tight div[data-elementor-type="wp-page"] #main_content {
    transform: translateY(-60px) scale(0.9);
    opacity: .5;
}
div[data-elementor-type="wp-page"] #main_content > .elementor-inner {
    margin: 0 auto;
    position: relative;
}

And the following javascript in an html widget and use this code in your functions.php file (or download the plugin version) to add a toggle to render the script below on the front end:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
//see - https://codepen.io/mfritsch/pen/KdKoKQ
(function($){
    $(window).on('scroll', function() {
        if ($(window).scrollTop() + $(window).height() > $('div[data-elementor-type="wp-page"]').outerHeight()) {
            $('body').addClass('tight');
        } else {
            $('body').removeClass('tight');
        }
    });
})(jQuery);

brought to you by

Download HTML-to-Script Plugin