[Support request] Motions effects on the Element header

Home Forums Support Motions effects on the Element header

This topic contains 1 reply, has 2 voices, and was last updated by  David 2 weeks, 6 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1274695

    Jacky

    Hi,

    I want to have the contents of the element header zoom in and the contents fade out when the view port changes (when the page scroll up). This is easy to do with the motion effects with elementor but it can’t apply to header element. Is it possible to achieve the same effects with css? I have attached the URL that I did with elementor. Thank you.

    #1275019

    David Customer Support

    Hi there,

    OnScroll Animations require some Javascript.
    I used a fade on scroll technique on Merch in the GP Site Library:

    https://gpsites.co/merch/the-single-post/

    That post even provides the JS i used which is this:

    <script>
    window.onscroll = function () {
        var target = document.getElementById("custom-post-entry-header");
    
        var height = window.innerHeight;
    
        var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    
        // Change this if you want it to fade faster
        height = height / 3;
        var fader = (height - scrollTop) / height;
        if (fader > 0) {
            target.style.opacity = fader;
        }
    
    };
    </script>

    To make this work:

    1. The code above targets this ID: custom-post-entry-header so in your header element you could wrap your content with this container:

    <div id="custom-post-entry-header">
    <!-- You content in here -->
    </div>

    2. Use a Hook Element to add the Script to the WP_footer hook and set the Display Rules to the same as your Header element.

    2.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.