[Support request] Fade in effect per segments of a page

Home Forums Support [Support request] Fade in effect per segments of a page

Home Forums Support Fade in effect per segments of a page

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1489264
    Marnix

    Hi there,

    Based on another forum post and answer by David I used the following CSS to create a fadein of the elements on a page:

    #page {
        -webkit-animation: fadein 2s;
                animation: fadein 2s;
    }
    
    @-webkit-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    
    @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    Is it possible to have this effect occur to each segment of a page, only when it comes into view?
    I.e. once I scroll down to the next segment this fadein occurs and not for the entire page upon loading?

    Thanks,

    Marnix

    #1489309
    Elvin
    Staff
    Customer Support

    Hi,

    Is it possible to have this effect occur to each segment of a page, only when it comes into view?
    I.e. once I scroll down to the next segment this fadein occurs and not for the entire page upon loading?

    To be honest, this level of customization is outside of GeneratePress’ scope but since we love helping people, here it goes:

    You need a JS library to make this happen. Or you can write one yourself but that will take too long.

    As for animate on scroll libraries, you can try learning AOS. – https://michalsnik.github.io/aos/

    More about AOS – https://css-tricks.com/aos-css-driven-scroll-animation-library/

    Note: This is pretty tricky. Making animation is easy as it’s just CSS. But the tricky part starts on the required triggers when the element comes into the viewport when you scroll and that is done with JS.

    GP’s stance about adding this as a feature- https://generatepress.com/forums/topic/page-scroll-hover-effect/#post-1162504

    #1489956
    Marnix

    Thank you Elvin for your reply. I will look into it!

    #1489979
    Elvin
    Staff
    Customer Support

    No problem.

    To add: Since GeneratePress doesn’t have a default way to add data attributes to its elements, you may have to resort to JS scripts to add them for you.

    This is a good read. https://www.digitalocean.com/community/tutorials/how-to-modify-attributes-classes-and-styles-in-the-dom

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