Yukarıdan aşağıya doğru akan yazı nasıl yaparım?

Arkadaşlar ben şunu istiyorum ekranın altından üstüne doğru akan yazı yazmak.Ben yazıyı yapıştıştırayım program aşağıdan yukarı doğru istediğim hızda göstersin istiyorum.bunu yapabileceğim bir program var mı?

Örnek:

https://hizliresim.com/7D2j9m

https://hizliresim.com/1EjR1D

https://hizliresim.com/MD9jNa

Video editleme programları kullanarak yapabilirsin.

Camtasia Studio.
Adobe After Effect.

Bunlar gibi youtube'de tonlarca video var bununla ilgili.

Eğer web sitesi için düşünüyorsan basitçe buradaki örnekler gibi yapabilirsin: https://www.quackit.com/javascript/codes/javascript_scroll.cfm

xbMarquee.js adlı js kütüphanesi ile yukarıdan aşağıya, aşağıdan yukarısa, soldan sağa, sağdan sola yazıyı kaydırabilirsin.

HTML :

<div class="container">
<div class="img-bg">
  <h1><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br /></a></h1>
</div>
</div>

CSS:

@-webkit-keyframes  {
  from {  }
  to {  }
}
@-o-keyframes identifier {
  from {  }
  to {  }
}
@-moz-keyframes identifier {
  from {  }
  to {  }
}
@keyframes fade-in {
  from { opacity:0;
  top:-35px}
  to { opacity: 1;
  top:0px;
  }
}
body {
  margin:0px;
  padding:0px;
  font-family: 'Amatic SC', cursive;
  font-weight: 700;
}
h1{
  background-color: rgba(2,2,2,.5);
  width:70vw;
  text-align: center;
 // lost-align:center;
  position:relative;
  left:calc(99.9% * 1/2 - (30px - 30px * 1/2) + 30px);
  border-left:7px solid #435566;
  
}
a {
  text-decoration: none;
  color:white;
  //width:100%;
  font-size: 2em;
  position: relative;
  animation:fade-in .5s ease-in;
}

.img-bg {
position:relative; 
//width:100%;  background:url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=765abd6dc931b7184e9795d8494966ed');
  background-size: cover;
  height: 100vh;
}

.img-bg > * {
position:absolute;
top:50%;
right:auto;
bottom:auto;
left:50%;
transform:translate(-50%, -50%);
}