Scrolling text

Dave J · May 17, 2021, 05:33:20 AM

Hi all,

As some of you will know I'm not a coder I just dabble with code and test things out.

On my test site

https://www.davejohnson.co.uk/testing/index.php I have managed to get 3 different lines of text to scroll on the 'Information Bar' mod one after the other. Now what I want to do is the have the 3 different lines of text different colours but I cannot for the life on me get it to work. I can obviously get all the text the same colour but that's not what I want. Can anyone help please?

This is the code I'm using.

Code Select

<title>Test scroll</title>
    <style>
      .marquee {
        margin: 0 auto;
        width: 100%;
        height: 30px;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;      
        position: relative;
	font-size: 1.3em;
      }
      .marquee:before,
      .marquee:after {
        position: absolute;
        top: 0;
        width: 50px;
        height: 30px;
        content: "";
        z-index: 1;
      }

      .marquee__content {
        width: 300%;
        display: flex;
        line-height: 30px;
        animation: marquee 30s linear infinite forwards;
      }
      .marquee__content:hover {
        animation-play-state: paused;
      }
      .list-inline {
        display: flex;
        justify-content: space-around;
        width: 33.33%;
        /* reset list */
        list-style: none;
        padding: 0;
        margin: 0;
      }
      @keyframes marquee {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-66.6%);
        }
      }
    </style>
<body>
<div class="marquee">
      <div class="marquee__content">
        <ul class="list-inline">
          <li>This is message 1</li>

        </ul>
        <ul class="list-inline">
          <li>This is another message</li>

        </ul>
        <ul class="list-inline">
          <li>This is a final message</li>

        </ul>
      </div>
    </div>
</body>

Kindred · May 17, 2021, 11:50:18 AM

<li>

change to

<li style="color:black;">

set different for each of the entries

Dave J · May 17, 2021, 01:38:31 PM

Quote from: Kindred on May 17, 2021, 11:50:18 AM
<li>

change to

<li style="color:black;">

set different for each of the entries

Thank you very much Kindred

Dave J · May 18, 2021, 04:34:48 AM

Thanks to the help from Kindred I have now resoled the colour issues.

The next problem I have is on initially saving the code the animation starts from the centre of the box, the others messages then run from the right hand side. Once the sequence has finish it then repeats but starts from the centre of the box again.

The old code I had for a single message always ran from right to left (old code below).

So 2 questions now.

1. Is there a way to adapt the old code so that I can have more than one message scroll through the box?

2. Is there a way to run the new code so that all messages start from the right side all the time.

Here is the new code

Code Select

<style style="text/css">
.marquee {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 25px;
  font-size: 1.3em;
      }
      .marquee:before,
      .marquee:after {
        position: absolute;
        top: 0;
        width: 100%;
        height: 30px;
        content: "";
        z-index: 1;
      }
      .marquee__content {
        width: 300%;
        display: flex;
        line-height: 30px;
        animation: marquee 20s linear infinite;
      }
      .marquee__content:hover {
        animation-play-state: paused;
      }
      .list-inline {
        display: flex;
        justify-content: space-around;
        width: 33.33%;
        /* reset list */
        list-style: none;
        padding: 0;
        margin: 0;
      }
      @keyframes marquee {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-100%);
        }
      }
    </style>
  <body>
    <div class="marquee">
      <div class="marquee__content">
        <ul class="list-inline">
          <li style="color:yellow;">message 1</li>
        </ul>
        <ul class="list-inline">
          <li style="color:green;">message 2</li>
        </ul>
        <ul class="list-inline">
          <li style="color:blue;">message 3</li>
        </ul>
      </div>
    </div>
  </body>

Old code

Code Select

<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
}

/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}

/* 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>
       This is the old code
   </span>
   </p>

You can see the scrolling text in the link from the first post.

Thanks for any help

Regards

Dave

News:

Scrolling text

Dave J

Kindred

Dave J

Dave J