[Resolved] Elements / Hook / Fade in on scroll

Home Forums Support [Resolved] Elements / Hook / Fade in on scroll

Home Forums Support Elements / Hook / Fade in on scroll

  • This topic has 7 replies, 2 voices, and was last updated 3 weeks ago by Ying.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2284565
    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

    #2284651
    Ying
    Staff
    Customer Support

    Hi Jan,

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

    #2286067
    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

    #2286657
    Ying
    Staff
    Customer Support

    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>

    #2286682
    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

    #2286746
    Ying
    Staff
    Customer Support

    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

    #2287006
    Jan

    This is spot on. Thanks Ying

    #2287628
    Ying
    Staff
    Customer Support

    No problem 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.