Trying to recreate a Ticker Scroll I had seen

HTML & CSS
1

All I have is the html part.

https://jsfiddle.net/j71zsmed/

It’s the yellow ticker scroll at the bottom of the screen:

I was trying to use dev tools, but wasn’t able to figure it out.

https://www.foxnews.com/

<div class="alert bg-yellow"> <a data-omtr-intcmp="election2022_ban_ticker" target="_parent" href="">
    <div class="pill">BREAKING NEWS</div>
    <div class="message animate">
      <ul style="animation: 90s linear 0s infinite normal none running banner-scroll;">
        <li class="text msg-0">text&nbsp;&nbsp;—&nbsp;&nbsp;</li>
        <li class="text msg-1">text&nbsp;&nbsp;—&nbsp;&nbsp;</li>
        <li class="text msg-2">text&nbsp;&nbsp;—&nbsp;&nbsp;</li>
      </ul>
    </div>
  </a> </div>
2

How hard did you look? You’re missing all the css components, which show in the dev tools. Quick & dirty, you need at least this:

.alert .message {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-left: 8px;
    color: #000;
    font-size: 16px;
    letter-spacing: -.2px;
    line-height: 22px;
    text-transform: uppercase;
}

.alert a { display: flex; flex-direction: row; background: yellow; }
.pill { background: #000; color: #fff; }
.animate ul { display: flex; }

@keyframes banner-scroll {
  0% {
    transform: translateX(0px);
}
100% {
    transform: translateX(-3733.5px);
  }
}
3

That doesn’t look the same: https://jsfiddle.net/35jusr4t/


as this:

4

Seriously? You can’t use the dev tools to find the stylings?

Here - word wrap turned off, and the yellow is tweaked to the same color; You can find the font stylings yourself. That’s devtools 101 level stuff.

* { padding: 0; margin: 0; }
.alert .message {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-left: 8px;
    color: #000;
    font-size: 16px;
    letter-spacing: -.2px;
    line-height: 22px;
    text-transform: uppercase;
}

.alert a { display: flex; flex-direction: row; background: #ffc000; text-decoration: none; color: #000; }
.pill { background: #000; color: #fff; white-space: nowrap; padding: .5rem; margin: .25rem; }
.animate ul { display: flex; }

@keyframes banner-scroll {
  0% {
    transform: translateX(0px);
}
100% {
    transform: translateX(-3733.5px);
  }
}
5

I am stuck on trying to get the font to look the same. https://jsfiddle.net/rxeyz0Lj/


Now the text isn’t centered: https://jsfiddle.net/8oe1rasx/

That would be line height.

6

Again, dev tools 101.

Look at the computed tab for the elements and see how the element is being rendered. That will give you font choice (which you don’t have), font-weight (which you don’t have) and other pieces of styling which tells you how that look is made.

1 Like
7

Now it’s all messed up. https://jsfiddle.net/8oe1rasx/2/

8

No it’s not. You’re missing a selector which is dealing with word wrapping.

Oh, and a hint, once you fix that, you’re going to need a z-index to fix the way the scroll looks,

1 Like
9

You are missing a number of things such as the default padding and margins need to be removed from the ul and a height set on the list.

This is the minimum,

* {
  box-sizing: border-box;
}

.alert {
  padding: 4px;
}

.bg-yellow {
  background: #ffc000;
}

.alert .message {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-left: 8px;
  color: #000;
  font-size: 16px;
  letter-spacing: -.2px;
  line-height: 22px;
  text-transform: uppercase;
}

.alert a {
  display: flex;
  position: relative;
  text-decoration: none;
}

.pill {
  padding: 2px 6px;
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  white-space: nowrap;
  background: #000;
  color: #fff;
}

.animate ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.animate ul li {
  height: 20px;
  white-space: nowrap;
}
.text{margin:0 auto;}

@keyframes banner-scroll {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-3733.5px);
  }
}

Note that it is likely that JS is updating this value (translateX(-3733.5px)) based on the amount of text and number of items etc.

1 Like
10

How would I remove this without messing up the rest of the code?
https://jsfiddle.net/v7gupn6t/2/

<a data-omtr-intcmp="election2022_ban_ticker" target="_parent" href="https://www.foxnews.com/live-news/2022-midterm-elections-voting-results-predictions-candidates-updates#&amp;_intcmp=election2022_ban_ticker"</a>

11

Just remove it and then add display:flex to .alert.

1 Like
12

Note that you will need the JS that goes with that scroller (as I mentioned) because the 3733.5px refers to the amount of text that is being displayed. If you change the amount of text then the scroller will no longer show the correct amount of text or will show a blank screen.

There’s too many scripts on that page for me to find the relevant js.

I have a similar old demo that works without JS and works automatically. The only thing that needs tweaking is the timing to slow or speed up depending on how much text you want to scroll.

1 Like
13

Where does this go?

animation: 90s linear 0s infinite normal none running banner-scroll;

oh, that part was in the html.

Like this? https://jsfiddle.net/cgkx539v/1/

How come the text isn’t going around in a circle?


.alert .animate ul {
    display: flex;
    animation: 90s linear 0s infinite normal none running banner-scroll;
}
    
@keyframes banner-scroll {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-3738.5px);
  }
}
14

I already told you this twice :slight_smile:

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.