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;
}