CODEWITHSUNDEEP
css
aurelSon
aurelSon

Reputation: 73

Css Animation: how to make a scrolling text to be repeated

I found a css code to make a text sliding on my webpage from right to left, I found that I can adjust the speed of the slide in this line "animation: scroll-left 20s linear infinite;" where I can change the "seconds" argument.

But I would like the text to be repeated, i.e something like this:

Please read this page      Please read this page      Please read this      Please read     Pl

instead of:

                                   Please read this page

where one have to wait that the text finish the line to come back again.

Here is my code for now:

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<style>

.scroll-left {
 height: 50px;  
 overflow: hidden;
 position: relative;
}
.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);  
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: scroll-left 20s linear infinite;
 -webkit-animation: scroll-left 20s linear infinite;
 animation: scroll-left 20s 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%); 
 }
}
</style>




<body>

<div class="container">
<br><br><br><br><br><br><br><br><br><br>
  <div class="row">

    <div class="col-sm-offset-3 col-sm-6">

        <div class="scroll-left">
        <p>Please read this page </p>
        </div>

    </div>

  </div>

</div>

</body>
</html>

I have tried all the options of this css code, but no one makes what I need.

Thank you

Upvotes: 0

Views: 9283

Answers (2)

Vanojx1
Vanojx1

Reputation: 5574

Based on your request of a pure css solution, there's no other way to duplicate the text without appending a new one or using javascript:

.scroll-left p:before, .scroll-left p:after{
  content: 'Please read this page';
  margin: 0 20px;
}

Upvotes: 1

Abhishek K. Upadhyay
Abhishek K. Upadhyay

Reputation: 1032

There are so many alternatives through which you can accomplish your job like marquee css and javascript etc. According to your requirement you need a custom code like css and js as well.

Please check the link. this is what you need. http://jsfiddle.net/roine/TCJT4/

Hope this helps!

Upvotes: 1

Related Questions