Rolling Banner

[zkab]

How can I use Hello World to create a rolling text … like a banner

[johnnyboy]

This post is deleted!

[broberg]

try this in your custom.css

.helloworld {
  height: 125px;
  width: 600px;
  overflow: hidden;
  position: relative;
}

.helloworld div {
  display: block;
  width: 100%;
  height: 130px;

  position: absolute;
  overflow: hidden;

  animation: marquee 10s linear infinite;
}


@keyframes marquee {
  0% { left: 50%; }
  100% { left: -100%; }
}

Do note, the Pi doesn’t handle css animations that good, it lacks hardware acceleration.

The css is mostly taken from : https://codepen.io/jamesbarnett/pen/kfmKa

[johnnyboy]

This post is deleted!

[broberg]

@johnnyboy I just wanted to state the source, since I basically just copied the css code, (credit where credit is due :D )

The css I posted above will scroll any text you enter in the config for the helloworld module, no need to alter any code.

[johnnyboy]

This post is deleted!

[zkab]

Thanks for the css code - I will be away for a couple of days but will test it when I am back … I keep you posted

[zkab]

I tried the code and it works … but in my case I call ‘helloworld’ twice in ‘config.js’ - one text in ‘upper_third’ and one in ‘bottom bar’.
Is there away to make only the text in ‘bottom bar’ to scroll ?

[strawberry 3.141]

@zkab you can select all helloworld modules in region bottom with the selector .region.bottom .helloworld

[zkab]

How do I use .region.bottom .helloworld ?
Can’t find any documentation …