[Resolved] Elements / Hook / Fade in on scroll

[Jan]

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

[Ying]

Hi Jan,

Can you try replacing the “ and ” with " in your code?

[Jan]

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

[Ying]

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>

[Jan]

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

[Ying]

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

[Jan]

This is spot on. Thanks Ying

[Ying]

No problem 🙂

[Author]

Posts