Archived topic
Motions effects on the Element header
1 reply · Started by Jacky on May 7, 2020
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.
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.
