Rolling Banner

[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 …

[strawberry 3.141]

@zkab just replace it in the css rules above where you just used .helloworld e.g.

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

[zkab]

I don’t get this right - nothing changes.
Here is my custom.css

pi@mirror:~/MagicMirror/css $ cat custom.css
/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

body {
}
.compliments .xlarge {
font-size: 100px;
color: #ff6600;
font-family: "Roboto Condensed Bold", sans-serif;
font-style: italic;
}
.helloworld {
font-size: 75px;
color: #660;
font-family: "Roboto Condensed", sans-serif;
font-style: normal;
}
.calendar .time {
color: #660;
}
.newsfeed .dimmed {
font-size: 20px;
color: #a2d2f6;
line-height: 50px;
}
.newsfeed .medium {
font-size: 40px;
color: #660;
line-height: 60px;
}
.brightb {
color: #a2d2f6;
}
.wi-sunrise {
color: #ff0;
}
.wi-sunset {
color: #f60;
}
.wi-night-showers {
color: #a2d2f6;
}
.wi-degrees {
color: #415;
}
.wi-rain {
color: #a2d2f6;
}
.wi-showers {
color: #a2d2f6;
}
.wi-night-showers {
color: #a2d2f6;
}
.wi-night-alt-cloudy-windy {
color: #aaa;
}
.wi-night-cloudy {
color: #aaa;
}
.wi-cloudy {
color: #aaa;
}
.wi-day-cloudy {
color: #aaa;
}
.wi-cloudy {
color: #aaa;
}
.wi-cloudy-windy {
color: #aaa;
}
.wi-showers {
color: #a2d2f6;
}
.wi-thunderstorm {
color: #ff0;
}
.wi-snow {
color: #fff;
}
.wi-fog {
color: #999;
}
.wi-night-clear {
color: #F4F8A9;
}
.wi-night-rain {
color: #a2d2f6;
}
.wi-night-thunderstorm {
color: #ff0;
}
.wi-night-snow {
color: #fff;
}
.wi-day-sunny {
color: #ff0;
}



.region.bottom .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;
}