Archived topic
Elements / Hook / Fade in on scroll
7 replies · Started by Jan on July 16, 2022
Hi Elvin,
I followed your guidance in this threat to achieve the same results as Kai.
This is the code I added to the Elements Hook (wp_footer):
<script>
jQuery(window).on(“load”,function() {
jQuery(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
jQuery(“.fade”).each(function() {
/* Check the location of each desired element */
var objectBottom = jQuery(this).offset().top + jQuery(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if (jQuery(this).css(“opacity”)==0) {jQuery(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if (jQuery(this).css(“opacity”)==1) {jQuery(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
</script>I also added an additional CSS class named fade to the container of the relevant section.
At this point, I tend to not use any additional CSS.
Any advice on what I may be missing is much appreciated.
Best,
Jan
Hi Jan,
Can you try replacing the “ and ” with " in your code?
Hi Ying,
this was an obvious flaw. Thanks for pointing this out.
The code reads as follows now:
<script>
jQuery(window).on("load",function() {
jQuery(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
jQuery(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = jQuery(this).offset().top + jQuery(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if (jQuery(this).css("opacity")==0) {jQuery(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if (jQuery(this).css("opacity")==1) {jQuery(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
</script>Still not working, unfortunately ;-/
What would be you next step?
Best,
Jan
Did you add this to your hook as well?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Hi Yin,
thanks for this suggestion. It does work now ;-)
I did not find any mention about this JS File in the original thread from Kai and Elvin ;-(
May I ask you to explain what it does?
Thanks,
Jan
The JS code is from 3rd part, and the original topic starter is trying to figure out how to use it, check out his original topic here:
https://generatepress.com/forums/topic/fade-in-out-according-to-scrolling-down-up/#post-1596087
This is spot on. Thanks Ying
No problem :)
