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 …

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

strawberry 3.141

@zkab you have to replace the second one as well

zkab

Second one ?

strawberry 3.141

@zkab

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

  position: absolute;
  overflow: hidden;

  animation: marquee 10s linear infinite;
}

zkab

OK - I got it more or less working …
There are two things I can’t figure out how to solve:

The upper-case character seem to be chopped of above and lower part of some character (like g) have the same problem.
I have changed ‘height: 130px’ back and forth … no effect.
The rolling text don’t flow smoothly but hacks …

Below is a portion of my helloworld.

.helloworld {
font-size: 75px;
color: #660;
font-family: "Roboto Condensed", sans-serif;
font-style: normal;
}
.region.bottom .helloworld div {
  display: block;
  width: 100%;
  height: 230px;
  position: absolute;
  overflow: hidden;
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0% { left: 50%; }
  100% { left: -100%; }
}

strawberry 3.141

@zkab 2. is expected behaviour of a pi as it doesn’t have a lot of rendering power

zkab

Thanks for your support … sad that pi is so weak …