Zur besten Antwort gewählt
Apr 21, 2025 - 13:43
Du kannst Dir doch Laufschrift anzeigen lassen und auch jede beliebige Schriftart wählen, also auch Text farbig hervorheben, den Text blinken lassen, die Schriftart mit Schatten versehen, was auch immer Du willst und was halt mit CSS möglich ist.
Um eine Laufschrift zu erzeugen kannst Du folgendermaßen Vorgehen:
- Element vom Typ Webseite wählen
- Dem Webseitenelement die Variable zuordnen, die den Lauftext enthält
- dann im Header Bereich individuell CSS nach Deinen persönlichen Anforderungen setzen
Hier ein Beispiel zum Ausprobieren, eintragen im HTML Gerüst des Webseitenelements
Dokument-Beginn
<!DOCTYPE html><html><head><meta charset="utf-8" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
* {
box-sizing: border-box;
}
@-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
bottom: 0;
width: 100%;
overflow: hidden;
height: 4rem;
background-color: transparent;
padding-left: 100%;
box-sizing: content-box;
}
.ticker-wrap .ticker {
display: inline-block;
height: 4rem;
line-height: 4rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
.ticker-wrap .ticker__item {
display: inline-block;
padding: 0 2rem;
font-size: 2rem;
color: white;
}
body {
padding-bottom: 5rem;
}
h1, h2, p {
padding: 0 5%;
}
</style></head><body>Hauptbereich
Dieser Text "Dies ist eine Laufschrift in NEO. Hier steht irgendwelcher Blablablabla das dann als Laufschrift durchläuft." wird in dem Beispiel als Laufschrift angezeigt, der von rechts nach links durchläuft.<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">Dies ist eine Laufschrift in NEO.</div>
<div class="ticker__item">Hier steht irgendwelcher Blabla das dann als Laufschrift durchläuft.</div>
</div>
</div>das ganze kannst Du dann eben individuell an Deine Bedürfnisse per CSS anpassen.
Von
super Idee Fonzo, genau so mache ich das
Von
Hallo Fonzo, lieben Dank für das Input.
Die Laufschrift funktionierte auf Anhieb mit Deinem Hinweistext aus dem Hauptbereich in Deinem Beispiel.
Was mir vom Verständnis fehlt ist der Bezug zur Variablen die ich gesetzt habe.
Wie bekomme den Inhalt der Variablen in den Text rein, bzw. wechselnde Texte in Abhängigkeit einer Variablen?
Gruß Robert
Von
Der AIO CREATOR NEO ermöglicht es einen Gerätestatus eines Geräts aus dem Gerätemanager oder einer Variable einem Webseitenelement zuzuweisen.
Der Status / Inhalt des Geräts bzw. der Variable wird in den Platzhalter %neo_state% ausgegeben.
Also da wo im HTML Grundgerüst %neo_state% steht, ersetzt die NEO Remote den Platzhalter durch den Status bzw. den Inhalt des Datenpunkts / der Variable.
Wenn Du also in dem Beispiel statt
<div class="ticker__item">Dies ist eine Laufschrift in NEO.</div>
dies ersetzt durch
<div class="ticker__item">%neo_state%</div>
und dem Webseitenelement einen Gerätestatus / Variable als Status zuweist, wird dann der Inhalt der Variable zur Laufzeit angezeigt.
Von
Hallo Fonzo, Dir wieder einmal lieben Dank! Läuft!
Gruß Robert
Neuen Kommentar hinzufügen