Как сделать вертикальный тикер HTML? [дублировать] ⇐ Html

[Anonymous]

I was trying to make a vertical ticker for my site's homepage, and found this: https://codepen.io/lewismcarey/pen/GJZVoG
Thing is, it's horizontal and the page design I've planned on making is meant to use a VERTICAL one, with the text rotated (see image)
What I was trying to describe in the previous Предложение:

Я пробовал Frankensteing пример, связанный выше, и лучшее, что я мог достичь, это то, что я не смог пройти через весь текст, который не смог, что я не смог пройти через весь текст, что я не смог пройти через весь текст, который не смог пройти через весь текст. Середина экрана и просто повторяется до того, как он может полностью уйти с экрана. Class = "Snippet-Code">

Код: Выделить всё

.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 48;
left: 5;
background-color: #3ea435;
overflow: hidden;
padding-top: 100%;
}

.sidebar .scroll-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-bottom: 100%;
animation: ticker 12s linear infinite;
}

.sidebar .scroll-container a {
display: inline-block;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
color: #ffffff;
opacity: 60%;
text-wrap: nowrap;
font-size: 96px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}

100% {
-webkit-transform: translate3d(0, 600%, 0);
transform: translate3d(0, 600%, 0);
}
}< /code>


[list]
Sample text Sample text Sample
[/list]

Подробнее здесь: https://stackoverflow.com/questions/797 ... tml-ticker