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.