Tom Tom - 15 days ago 5
CSS Question

CSS animate scrolling text using text-indent - get length of content

I have created an "Important Notice" bar where I want the text to scroll across the screen.

It is achieved by animating the text-indent which seemed to work well until I had text which was longer than the width of the screen.

Here's the HTML:

<div class="sitemessage">
dfgh hgsl;k sfghjh fgdlj dflgh sg jls sdfhsdkjldfjksg sdfg ksjdfhg klsjdfhg lksjdfhg klsjdhg lksjdhfg sldkfjgh sdflgkjsdfglk jsdfg klsdfgl jksdfgl jksdfg ljsdfgkjl dafglkj adfgkl sdfgkjh sdfgkhl sdfg kjlsdfgk lsdfgk jl sdfgkl adfgkl adfgklj sdfgklhj sdfgkl jdfg kljafdg ljkdfg klsdfgkhjl sdfgk jlsdfgkhj dfgkhl adfgkj adfkljg a
</div>


And here's my css:

.sitemessage {
width:100%;
max-width: 960px;
margin:auto;
white-space: nowrap;
overflow: hidden;
text-indent: 965px;
animation: floatText 15s infinite linear;
}

.sitemessage:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}

@-webkit-keyframes floatText{
from {
text-indent: 100%;
}

to {
text-indent: -100%;
}
}

@media screen and (min-width: 960px) {
@-webkit-keyframes floatText{
from {
text-indent: 960px;
}

to {
text-indent: -100%;
}
}
}


The problem I have is that the length of the text in the
.sitemessage
container could be a lot more or a lot less than 100% of the screen width so using text-indent of -100% won't really work.

Any ideas of something I can do with out resorting to javascript or adding to the html.

Answer

You can try using transform instead of text-indent.

jsFiddle

.sitemessage {
  display: inline-block;
  white-space: nowrap;
  animation: floatText 15s infinite linear;
  padding-left: 100%; /*Initial offset*/
}
.sitemessage:hover {
  animation-play-state: paused;
}
@keyframes floatText {
  to {
    transform: translateX(-100%);
  }
}
<div class="sitemessage">
  START dfgh hgsl;k sfghjh fgdlj dflgh sg jls sdfhsdkjldfjksg sdfg ksjdfhg klsjdfhg lksjdfhg klsjdhg lksjdhfg sldkfjgh sdflgkjsdfglk jsdfg klsdfgl jksdfgl jksdfg ljsdfgkjl dafglkj adfgkl sdfgkjh END
</div>