Currently, I'm working on creating a credit scrolling effect that pulls data from the JustGiving API to display a list of donors. I have successfully populated the list of donors and connected to the API without any issues. However, the challenge lies in making the list scroll smoothly up the screen.
To achieve this effect, I have implemented CSS animation. Although the animation works, it only displays a limited number of credits before stopping. Here is how I set up the animation:
@keyframes creditRoll {
0% {
top: 100%;
}
100% {
top: -100%;
}
}
The CSS styling for the Credits div looks like this:
#Credits {
display: block;
position: absolute;
top: 100%;
width: 100%;
animation: creditRoll 75s linear forwards infinite;
animation-delay: 5s;
animation-iteration-count: 1;
}
I suspect that the 100% in the code refers to the screen size rather than the div height. Is there a way to ensure that the entire div scrolls up and off the screen seamlessly? Currently, the div scrolls up but halts midway through the credits.
You can view an example at https://jsfiddle.net/kao6hs2t/.