Advanced Stylesheet CSS not working

Ignition
1

I am at close to 0 on the experience scale for CSS. I found the code to do a marquee style label. I have the labels I want tied in and things like the white-space: nowrap, and the color working, so I know the labels are using the class. BUT, the marquee part is not working. this is what I have in my style sheet. Am I missing something besides tying the labels to the class to get it to fully work?


.psc-marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
/*  background: rgb(161, 61, 175);*/
/*  color: #fff;*/
}

.psc-marquee span {
  display: inline-block;
  min-width: 100%; /* this is to prevent shorter text animate to right */
  white-space: nowrap;
  font-size: 2.5em;
  animation: marquee 4s ease-in-out forwards;
}

@keyframes marquee {
  from {transform: translateX(0);     margin-left: 0;}
  to   {transform: translateX(-100%); margin-left: 100%; }
}
2

This is targeting a span type element that also has the marquee style class applied to it. What actual Perspective component are you trying to mimic this marquee effect on? That will determine how to author your selector correctly.

Also, before @Transistor beats me to it, at least consider whether you actually want marquee text - it's hard to read, looks extremely outdated, and is generally not a great idea per 'high performance HMI' standards.

2 Likes
3

It is for a label that shows a long string.
I tend to agree on the aesthetics of it and wouldn't use it normally. The customer Doesn't have room to just add more lines and needs large text. They have requested this specifically, so we will let them decide if it is what they want ultimately. Even if they don't end up liking it, I would like to know for my own learning/curiosity how to get it to work.

1 Like
4

What about doing a mouseover/tooltip for long text?

5

It's on a TV.

1 Like
6

So I got it to work (well enough for them to get a feel for it). Just to update the thread.

.psc-marquee-container{
  overflow:hidden;
  white-space: nowrap;
}
.psc-marquee{
  animation-delay: 10s; 
  min-width:100%;
  
  white-space: nowrap;
  animation-name: marquee;
  animation-duration: 12s;
  animation-delay: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.psc-marquee:hover{
  animation-play-state: paused;
}
@keyframes marquee {
  from{margin-left : 10%;}
    to{margin-left: -200%;}
}
7

Show the component and class you asigned to it.
Show the result and say what could be improved, and ill fix it for you (if you reply fast enough as im going on holidays next week xd)

8

Marquee.zip (325.6 KB)
wasn't sure how else to get a screen capture to upload.

Ideally, I'd like it to just start with the string after a set spacing so it doesn't just jump back to the start. This script also relies on me setting the
to{margin-left: -200%;}
percentage wide enough that it'll show the whole string...which isn't ideal obviously.

Any input is appreciated, thank you!

9

One generally puts the marquee in a wrapper so they can just declare a fixed 100% for any text. But seems fine otherwise.

Other than that i dont really like this, if the text is to long. You would be better off adding a tooltip with the full text that wraps. Or do both atleast.

10

Sounds good. I agree, as stated before. On a TV so tooltip not an option. Specifically requested by customer. I am generally a stickler about animations of any kind as well as I did our HMI standards for several years. Thank you.

11

Doesnt a tv have enough space for multiline text? xd
ahwell if they requested it :man_shrugging:

Your setup was as good as it gets with only css,
I saw better examples but that required a lot more setup (or js). Which is way to much work to do in perspective for only small improvement

1 Like