Menu
Please bear with me as I had a head injury years ago so I am a little slow on learning new things but I have basic understanding of html and can figure some things out through trial and error.
I'm trying to turn text comments into scrolling credits like at the end of a movie. I've tried some of the free and open source movie editing software but I didn't like the limitations and can't afford to purchase pro stuff.
I've got all everything under control as far as color and text, the way I want it to appear visually, but it stops and loop restarts well before the the end. I'm trying to have several hundred to a few thousand lines.
Am I missing something or is there a limit to the number of lines or characters that can appear before it starts over from the top? I changed it and please feel to change the speed so you don't have to sit through the whole thing. Any help in fixing or suggesting another means is greatly appreciated.
This is what I have so far.
@font-face {
font-family: Abadi MT Condensed
}
body {
background-color: #BBBBBB;
overflow: hidden;
}
.wrapper {
position: absolute;
top: 100%;
left: 10%;
width: 1600px;
margin-left: -100px;
font-family: Abadi MT Condensed;
text-align: left;
color: #fff;
animation: 15s credits linear infinite;
animation-delay: 1s;
}
.video_title {
margin-bottom: 50px;
font-size: 80px;
text-shadow: 2px 2px #878787;
letter-spacing: 0px;
text-outline: #304345;
text-decoration: none;
}
.job_title {
margin-bottom: 5px;
font-size: 30px;
text-shadow: 2px 2px #878787;
}
.person_name {
margin-bottom: 20px;
font-size: 50px;
font-variant: small-caps;
text-shadow: 2px 2px #878787;
}
@keyframes credits {
0% {
top: 100%;
}
100% {
top: -500%;
}
}<div class="wrapper">
<div class="person_name">
<p>
<div class="job_title">IN THE BEGINNING..........
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah10
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah20
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah30
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah40
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah50
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah60
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah70
<p>blah71
<p>blah72
<p>blah73
<p>blah74
<p>blah75
<p>blah76
<p>blah77
<p>**********************blah78 it cuts off at this line
<p>blah79
<p>blah80
<p>blah83
<p>blah84
<p>blah85
<p>blah86
<p>blah87
<p>blah88
<p>blah89
<p>blah90
<p>blah91
<p>blah92
<p>blah93
<p>blah94
<p>blah95
<p>blah96
<p>blah67
<p>blah98
<p>blah99
<p>blah100
<p>blah101
<p>blah102
<p>blah103
<p>blah104
<p>blah105
<p>blah106
<p>blah107
<p>
</div>
</div>
708
asked Sep 14 '25 19:09
Well, you are only scrolling the content up to 500% (5 times its parents size), but it's actually about 7000px high. That's why it will never scroll all the way down but instead jump back up when it has reached the 500%.
I have added an outer-wrapper which has a fixed height of 200px. The content you want to scroll is about 35 times as high as the wrapper, which means we'll need to set top at the last frame to be 35000%. I have set it to 36000% just to ensure the last line is also scrolled until it is out of view.
Try it out below.
If I may suggest, using JavaScript will give you more options and a "cleaner" way of doing this. Right now you'll need to calculate and hardcode all values based on the content which is not really good practice.
By the way, you're not closing your <p> tags ;)
@font-face {
font-family: Abadi MT Condensed
}
body {
background-color: #BBBBBB;
overflow: hidden;
}
.outer-wrapper {
position: relative;
height: 200px;
}
.wrapper {
position: absolute;
top: 100%;
left: 10%;
width: 1600px;
margin-left: -100px;
font-family: Abadi MT Condensed;
text-align: left;
color: #fff;
animation: 15s credits linear infinite;
animation-delay: 1s;
}
.video_title {
margin-bottom: 50px;
font-size: 80px;
text-shadow: 2px 2px #878787;
letter-spacing: 0px;
text-outline: #304345;
text-decoration: none;
}
.job_title {
margin-bottom: 5px;
font-size: 30px;
text-shadow: 2px 2px #878787;
}
.person_name {
margin-bottom: 20px;
font-size: 50px;
font-variant:small-caps;
text-shadow: 2px 2px #878787;
}
@keyframes credits {
0% {
top: 100%;
}
100% {
top: -3600%;
}
}<div class="outer-wrapper">
<div class="wrapper">
<div class="person_name"><p>
<div class="job_title">IN THE BEGINNING..........
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah10
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah20
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah30
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah40
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah50
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah60
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah70
<p>blah71
<p>blah72
<p>blah73
<p>blah74
<p>blah75
<p>blah76
<p>blah77
<p>**********************blah78 it cuts off at this line
<p>blah79
<p>blah80
<p>blah83
<p>blah84
<p>blah85
<p>blah86
<p>blah87
<p>blah88
<p>blah89
<p>blah90
<p>blah91
<p>blah92
<p>blah93
<p>blah94
<p>blah95
<p>blah96
<p>blah67
<p>blah98
<p>blah99
<p>blah100
<p>blah101
<p>blah102
<p>blah103
<p>blah104
<p>blah105
<p>blah106
<p>blah107
<p></div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
