paste the following code into the post's HTML, and add more content
effects
<style>
#starwartitles
{
position: relative;
width: 300px;
height: 300px;
bottom: 0;
left: 50%;
margin-left: -9em;
font-size: 350%;
font-weight: bold;
text-align: justify;
overflow: hidden;
transform-origin: 50% 100%;
transform: perspective(200px) rotateX(25deg);
}
#starwartitles:after
{
position: relative;
content: ' ';
left: 0;
right: 0;
top: 0;
bottom: 60%;
background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
pointer-events: none;
}
#starwartitlecontent
{
position: relative;
top: 100%;
animation: scroll 50s linear 4s infinite;
}
@keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}
</style>
<br />
<div id="starwartitles">
<div id="starwartitlecontent">
content<br />
content1<br />
content2<br />
content<br />
content1<br />
content2<br />
content<br />
content1<br />
content2<br />
content<br />
content1<br />
content2<br />
content<br />
content1<br />
content2<br />
</div>
</div>
#starwartitles
{
position: relative;
width: 300px;
height: 300px;
bottom: 0;
left: 50%;
margin-left: -9em;
font-size: 350%;
font-weight: bold;
text-align: justify;
overflow: hidden;
transform-origin: 50% 100%;
transform: perspective(200px) rotateX(25deg);
}
#starwartitles:after
{
position: relative;
content: ' ';
left: 0;
right: 0;
top: 0;
bottom: 60%;
background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
pointer-events: none;
}
#starwartitlecontent
{
position: relative;
top: 100%;
animation: scroll 50s linear 4s infinite;
}
@keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}
</style>
<br />
<div id="starwartitles">
<div id="starwartitlecontent">
content<br />
content1<br />
content2<br />
content<br />
content1<br />
content2<br />
content<br />
content1<br />
content2<br />
content<br />
content1<br />
content2<br />
content<br />
content1<br />
content2<br />
</div>
</div>