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 )

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 …