Jump to content

How to remove white space when scrolling text in CSS


warrennjiru
 Share

Recommended Posts

At the 0% mark of the keyframes it needs to start at 1200px, not 100%. 100% is the width of the entire text, what you really want is the width of the parent element. So the code should be like this:

/* Move it (define the animation) */@-moz-keyframes scroll-left {  0% {    -moz-transform: translateX(1200px);  }  100% {    -moz-transform: translateX(-100%);  }}@-webkit-keyframes scroll-left {  0% {    -webkit-transform: translateX(1200px);  }  100% {    -webkit-transform: translateX(-100%);  }}@keyframes scroll-left {  0% {    -moz-transform: translateX(1200px);    /* Browser bug fix */        -webkit-transform: translateX(1200px);    /* Browser bug fix */        transform: translateX(1200px);  }  100% {    -moz-transform: translateX(-100%);    /* Browser bug fix */        -webkit-transform: translateX(-100%);    /* Browser bug fix */        transform: translateX(-100%);  }}
Link to comment
Share on other sites

You just need to force its starting position at right edge by maybe using left: 100%; on .scroll-left p, then start 0% with translateX(0), the only problem now is because it start at right edge -100% will end up showing the last 1200px of text, but this can be taken care of by using padding-right: 100%; which should give -100% the total width of text content + 1200px of parent container to force it left out of view of .scroll-left bordered parent container.

 

better this way, cause there is no need adjust translate to fixed pixel width each time.

 

http://codepen.io/anon/pen/eNXzGV

Edited by dsonesuk
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...