Scrolling css text

[Dave J]

Hi all,

I have some scrolling text using css. The code (see below) works fine and the text does scroll across the screen except for a couple of things I'd like to change.

1. The time it takes for the text to start scrolling once its finished on the left side. Currently it seems to be around 10 seconds and I would like to reduce that to around 5 seconds
2. When the text is seen on a moblile or tablet if the original text is too long it cuts the text off rather than scroll though the whole message (the message in the code below is OK and it's not too long)

Can anyone help with changes please?

Code Select Expand

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

<div class="marquee">
<p>Don't forget to tell your friends and family about us. Registration is free.</p>
</div>

If you want to see it working go to my site

[GigaWatt]

Try changing these two values to 25s.

Code (before) Select Expand


-moz-animation: scroll-left 30s linear infinite;
-webkit-animation: scroll-left 30s linear infinite;


Code (after) Select Expand


-moz-animation: scroll-left 25s linear infinite;
-webkit-animation: scroll-left 25s linear infinite;


This is about the duration (10s --> 5s). About the cutoff... don't know .

[Dave J]

Thanks. I'll have a look and let you know.

[Dave J]

Try changing these two values to 25s.

Code (before) Select Expand


-moz-animation: scroll-left 30s linear infinite;
-webkit-animation: scroll-left 30s linear infinite;


Code (after) Select Expand


-moz-animation: scroll-left 25s linear infinite;
-webkit-animation: scroll-left 25s linear infinite;


This is about the duration (10s --> 5s). About the cutoff... don't know .

Changing those lines makes no difference, even if I go as low as 5 for each.

The only line that makes a difference is

Code Select Expand

animation: scroll-left 30s linear infinite the more I reduce that number the faster the text scrolls across the screen and that also reduces the repeat time, I have now set that to 20 which is readable and repeats about 7 secs which is better.

Now just to find out about the cutting off of the text on mobile devices.

Thanks for your help GigaWatt

[Dave J]

OK I have now sorted the issue out. There was a lot of trial and error going on but I'm happy with it now.

I used the following code and not only does it repeat it repeats immediately after the text has finish on the left side with no wait time. I have also incorporated a hover function that pauses the scrolling text when the curser goes over it.

It also now scrolls the whole text even on mobile devices, so in thoery it doesn't matter how much text you insert in to it.

So I'm a happy bunny.

Code Select Expand

<style style="text/css">
.marquee {
  width: 100%;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 25px;
  font-size: 1.3em;
  color: yellow;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  will-change: transform;
  /* show the marquee just outside the paragraph */
  animation: marquee 25s linear infinite;
}

.marquee span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}


/* Respect user preferences about animations */

@media (prefers-reduced-motion: reduce) {
  .marquee {
    white-space: normal
  }
  .marquee span {
    animation: none;
    padding-left: 0;
  }
}
</style>
<p class="marquee">
   <span>
       Why not get your family and friends to join us. All they need to do is click on the 'Register' button at the top of the page, it doesn't cost anything and we wont ask for any details they don't want to give us.
   </span>
   </p>

[GigaWatt]

It's actually advisable to include the code you've removed from your css (the -moz-animation -webkit-animation) and just set it to the same values as animation . One is for Mozilla (Firefox... I'm not a coder, but I'm guessing Firefox is "special" regarding animation and/or marque) and the other is for Safari (also special in some way... I guess).

[Dave J]

It's actually advisable to include the code you've removed from your css (the -moz-animation -webkit-animation) and just set it to the same values as animation .

Yep done that, thanks again