https://www.html.am/html-codes/marquees/css-scrolling-text.cfm
I would like to have a strolling text as above, and that strolling text be limited to a yellow box, meaning that the text does not stroll all the way to the left, but limited inside the yellow box.
on ui.R, I have this:
tags$style(type="text/css",
"
.scroll-left div {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
height: 50px;
overflow: hidden;
overflow-wrap: break-word;
position: relative;
background: yellow;
color: red;
border: 1px solid orange;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 40s linear infinite;
-webkit-animation: scroll-left 40s linear infinite;
animation: scroll-left 40s 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%);
}
}
"
),
column(6,div(class = "scroll-left", h2(textOutput("strollingtext")))),
On the server side, I have below:
output$strollingtext <- renderText('Testing text from Left to Right')
I can see the scrolling text coming in.. But I would like to limit that strolling text to be inside a yellow box, meaning that the text does not stroll all the way to the left, but limited inside the yellow box, as what the above link shows.
I would appreciate any help, Thanks.