Sliding text / value

Feature Requests
5

just to get back on this, the Custom Header allows one to do this:

vertical marquee

header_text: >-
  <style>
  flip {height:24px;overflow:hidden;}
  flip > div > div {color:var(--primary-text-color);height:24px;margin-bottom:24px;display:inline-block;text-overflow: clip;white-space: nowrap;}
  flip div:first-child {animation: show 10s linear infinite;}
  @keyframes show {
  0% {margin-top:-144px;}
  17% {margin-top:-96px;}
  33% {margin-top:-96px;}
  50% {margin-top:-48px;}
  67% {margin-top:-48px;}
  83% {margin-top:0px;}
  100% {margin-top:0px;}}
  </style>
  <div style='float: left'>Ha Rpi4:&nbsp;</div>
  <div id=flip><div><div>
  Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  Daily -  {{states('sensor.dark_sky_daily_summary')}}</div></div><div><div>
  Hourly - {{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
  Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  {{states('sensor.br_symbol')}}</div></div><div><div>

horizontal marquee:

        {% set alerts = namespace(active=[], color='var(--google-red-500)') %}
        {% if states('sensor.weatheralerts') | float != 0 %}
          {% for alert in state_attr('sensor.weatheralerts', 'alerts') %}
          {% set alerts.active = alerts.active + [alert['title']] %}
          {% endfor %}
        {% else %} {% set alerts.active = alerts.active + ['No active alerts'] %}
        {% endif %}
        {% set inside=states('sensor.temperatuur_living')%}
        {% set outside=states('sensor.temp_current')%} 
        {% set temp_color='var(--primary-text-color)'%} 
        {% set symbol='°C' %}
        <div style='display: flex;display: -webkit-flex;'>
        <div>Ha&nbspRpi4:&nbsp;</div>
        <marquee>
        <span style='color: {{ temp_color }}'>
        Inside temperature: {{ inside }}{{ symbol }},
        Outside temperature: {{ outside }}{{ symbol }},
        </span>
        <span style='color: {{ alerts.color }};'>
        Alerts: {{ alerts.active | join(' - ')}},
        </span>
        <span style='color: orange;'> 
        System alerts: {{states('sensor.marquee_alerts')}},
        </span>
        <span style='color: {{ temp_color }}'>
        Summary - {{states('sensor.dark_sky_summary')}},
        Daily -  {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
        Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
        </span>
        </marquee>

would be really nice if we could use this on a markdown card of sorts, but doing so now yields this:

19

with:

type: markdown
style: |
  ha-card {
  background: 'var(--paper-card-background-color)';
  }
content: >
  {% set inside=states('sensor.temperatuur_living')%}
  {% set outside=states('sensor.temp_current')%} 
  {% set temp_color='var(--primary-text-color)'%} 
  {% set symbol='°C' %}
  <div style='display: flex;display: -webkit-flex;'>
  <div>Ha&nbspRpi4:&nbsp;</div>
  <marquee>
  <span style='color: {{ temp_color }}'>
  Inside temperature: {{ inside }}{{ symbol }},
  Outside temperature: {{ outside }}{{ symbol }},
  </span>
  <span style='color: orange;'> 
  System alerts: {{states('sensor.marquee_alerts')}},
  </span>
  <span style='color: {{ temp_color }}'>
  Summary - {{states('sensor.dark_sky_summary')}},
  Daily -  {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
  Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
  </span>
  </marquee>

might give the button card a try, but otherwise support this FR +1… You might do the yourself too, to give this some traction :wink:
Ill post a separate question on the community to ask where I might be able to put this marquee code in a card…

for the Custom Header, see Custom Header template showcase and discussion