Stop CSS fading when scrolling?
I added a fade effect to the bottom of a scrollable div with text to emphasize scrolling, but the idea is that when you reach the bottom, aka, there's no more text, I want that fade to cease. I tried the animation-timeline property but I'm not getting any results, any ideas?
I used the following code
You can use this as HTML in codepen for testing but it's just a div with lorem ipsum
Here's how it looks like...
I used the following code
body {
background: black;
color: white;
}
div {
width: 200px;
height: 250px;
overflow-y: auto;
animation: remove-fade linear;
animation-timeline: scroll();
animation-duration: 1ms; //this one is for a firefox bug
mask: linear-gradient(to bottom, rgba(0,0,0, 1) 70%, rgba(0,0,0, 0) 100%);
}
@keyframes remove-fade {
to { mask: none }
}You can use this as HTML in codepen for testing but it's just a div with lorem ipsum
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros nulla, elementum egestas ipsum nec, porttitor gravida velit. Fusce placerat purus libero, et dignissim ligula tempor vitae. Cras mi mauris, viverra nec ipsum ac, rhoncus semper lacus. Pellentesque posuere eleifend sollicitudin. Maecenas ut enim id eros ultrices vestibulum placerat tincidunt nisl. Nulla interdum dignissim lectus, vitae convallis arcu pellentesque nec. Nunc in nulla orci. Suspendisse elit est, congue nec aliquet eget, iaculis non erat. Aliquam erat volutpat. Integer egestas varius rhoncus. Fusce tristique ante posuere dolor convallis pretium. Quisque eget finibus sem. Duis aliquam euismod metus nec porta. Vestibulum malesuada, neque et commodo ultrices, felis dui efficitur dui, vel luctus ipsum ex ac nibh.</div>Here's how it looks like...
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
