No replies
DSBaudio
DSBaudio's picture
Offline
newbie
Last seen: 1 day 2 min ago
Joined: 2019-12-01
Posts: 1
Points: 4

Hi all, I have the following code to create a scrolling text box on one of my site pages:

/* scroll-left */
 
.scroll-left {
 
height: 50px;
 
overflow: hidden;
 
position: relative;
 
background: whitesmoke;
 
color: blue;
 
border: 1px solid black;
 
}
 
.scroll-left p {
 
position: absolute;
 
width: auto;
 
height: 100%;
 
margin: 0;
 
line-height: 50px;
 
text-align: center;
 
white-space:nowrap;
/* Starting position */
 
-moz-transform:translateX(100%);
 
-webkit-transform:translateX(100%);
 
transform:translateX(100%);
 
/* Apply animation to this element */
 
-moz-animation: scroll-left 60s linear infinite;
 
-webkit-animation: scroll-left 60s linear infinite;
 
animation: scroll-left 60s linear infinite;
 
}
 
/* Move it (define the animation) */
 
@-moz-keyframes scroll-left {
 
0% { -moz-transform: translateX(100%); }
 
100% { -moz-transform: translateX(-100%); }
 
}
 
@-webkit-keyframes scroll-left {
 
0% { -webkit-transform: translateX(100%); }
 
100% { -webkit-transform: translateX(-100%); }
 
}
 
@keyframes scroll-left {
 
0% {
 
-moz-transform: translateX(100%); /* Browser bug fix */
 
-webkit-transform: translateX(100%); /* Browser bug fix */
 
transform: translateX(100%);
 
}
 
100% {
 
-moz-transform: translateX(-100%); /* Browser bug fix */
 
-webkit-transform: translateX(-100%); /* Browser bug fix */
 
transform: translateX(-100%);
 
}
 
}

Here it is on the page (the box is just below the audio sample)

https://dsbaudio.com/four-a-novella-by-p-j-blakey-novis/

Can anyone tell me why the text takes so long to appear?

Comment

Share