Here is my rework of Ticker made by dennisaion here. Since initially I had trouble running it and then running as I wanted, I’ve mixed the project with this demo + added some adjustments.
Now it looks like this:
For this to work, you need to install this HACS: GitHub - PiotrMachowski/lovelace-html-card: This card displays provided data as an HTML content of a card.
And here is the script:
type: custom:html-card
view_layout:
position: main
content: |
<div class="ticker-wrap">
<div class="ticker">
<span class="ticker__item">ABC</span>
<span class="ticker__item">DEF</span>
<span class="ticker__item">GHI</span>
<span class="ticker__item">Sun elevation: [[sun.sun.attributes.elevation]]</span>
</div>
</div>
<style>
ha-card {
height: 0px;
visibility: hidden;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
font-family: Zen Dots;
font-size: 2.5rem;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
height: 3.5rem;
background-color: rgba(255, 0, 0, 0.7);
visibility: visible;
padding-left: 100%;
box-sizing: content-box;
.ticker {
display: inline-block;
height: 4rem;
line-height: 4rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 7s;
&__item {
display: inline-block;
color: white;
}
}
}
.ticker__item:before {
content: " • ";
}
.ticker__item:after {
content: " • ";
margin-right: 40px;
}
</style>
Tested with 2024 Firefox (macOS) and Chromium browser (running on RPi), HA: v2024.2.5, html-card 2024.03.24.