yeport.blogg.se - Fade in on scroll css

Now we just need to find out which direction it is overflowing to (can be both)Ĭonst isScrolledToBottom = el. Then the only thing Youll need to look up is CSS animations. Otherwise, the element is overflowing! The key is to use a Javascript to register the scroll then you can either use Javascript to make it fade in and out, or if you are like me and prefer CSS options as much as possible, you can do like I did and add/remove classes as needed. GUARD: If element is not scrollable, remove all classesĮl.classList.remove('is-bottom-overflowing', 'is-top-overflowing')

See proof-of-concept below:Ĭonst isScrollable = el.scrollHeight > el.clientHeight JS is used to sniff out the scroll position and toggle these classes. We use CSS custom properties that can be overridden by adding/removing a class. The JS part is simply toggling these color stops using classes. Now you ask: how do we hide the mask? Easy: if the color stops are spaced 0px apart, the mask will be black throughout, which will make it completely see through. To mask both the top and the bottom, you will need to combine two gradients into one: mask-image: linear-gradient(to bottom, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%) However, this only creates the bottom gradient. When we are 48px away from the bottom, start changing color from black (see through when masking) to transparent (opaque when masking).

Create a linear gradient from the top going towards the bottom.

To create a "bottom fadeout" effect, you can use this following CSS rule: mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%) Depending on your needs, JS might be needed (for example, if you wan to conditionally toggle the fading depending if the user has scrolled to the very top/bottom of the element). Description: A lightweight JavaScript scroll animation library that adds high-performance, CSS3-powered fade/slide animations to elements as they scroll into view. You can use CSS mask-image for browsers that support it (which is pretty common nowadays).