Archived topic
Fade in effect per segments of a page
3 replies · Started by Marnix on October 14, 2020
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
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
Thank you Elvin for your reply. I will look into it!
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
