Aşağıdan Yukarıya Doğru Yazı Kaydırma Mektup Okuma Html

Evet Arkadaşlar bu yazımda mektup okunması gibi yazı kaydırma.
eski filmlerde olurdu ya ben şimdi çok uzaklardayın diye başlar arkada hüzünlü bir müzik ile beraber oynardı.

işte şimdi onun nasıl yapıldığını öğreneceksiniz.


Aşağıdaki kodları uygun şekilde kopyalayıp yapıştırın.
istediğiniz sonucu elde edeceksiniz.

Sorularınızı alabilirim.

Orjinal link emeğe saygı :)  http://codepen.io/davidastout3/pen/BNpRRv


html Kodları

        <div id="eventHorizon"><div id="eventHorizoncontent">

            <p>
Mest WEb Tasarım
Web Tasarım Yazılım Seo Rehberi Bu web site bloggerimizde tüm web yazılımcı tasarımcı ve seocu olmak isteyen yada olanları ilgilendiren güzel paylaşımların güzel bir dille
    </p>
    </div></div>




Css Kodları

#eventHorizon
{
    position: absolute;
    width: 18em;
    height: 50em;
    bottom: 0;
    left: 50%;
    margin-left: -9em;
    font-size: 2000%;
    font-weight: bold;
    text-align: justify;
    overflow: hidden;
    transform-origin: 25% 100%;
    transform: perspective(900px) rotateX(10deg);
}

#eventHorizon:after
{
    position: absolute;
    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;
}

#eventHorizoncontent
{
    position: absolute;
    top: 100%;
    animation: scroll 50s linear 0s infinite;
}

@keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
}