Scroller for Home screen banner text

[SoliFlix 23]

Just a tiny JavaScript that makes the home screen banner text scroll.

 

As usual, it only works in the web app/client. Other apps just show the normal static banner text.

Install:
1. Paste BannerTextScroller.js inside /system/dashboard-ui/ (Windows) or your OS equivalent.
2. Add the following line before the </body> tag at the end of /system/dashboard-ui/index.html:

<script src="BannerTextScroller.js" defer></script>

BannerTextScroller.js

[SoliFlix 23]

Here is a pure CSS version of the banner scroller: no JavaScript, no files to copy and no index.html to edit. Just copy it into Dahsboard / General / Custom CSS:
 

/* BannerTextScroller.css
 * Scrolls Emby's "Home screen banner text" with pure CSS, no JavaScript.
 * Install: paste everything into Dashboard, General, "Custom css", save and reload the web client (Ctrl+F5).
 * Change the 25s in the animation line to make it faster (smaller) or slower (bigger).
 */

/* give the banner the full width (it is only as wide as its text by default) */
.infoBannerContent:has(> .sectionTitle-cards > h3) {
    width: 100%;
    flex: 1 1 100%;
    box-sizing: border-box;
}

/* the text starts at the right edge (padding-left 100%) and scrolls out on the left */
.infoBannerContent > .sectionTitle-cards {
    overflow: hidden;
    white-space: nowrap;
}

.infoBannerContent > .sectionTitle-cards > h3 {
    display: inline-block;
    margin: 0;
    padding-left: 100%;
    animation: bannerTextScroll 25s linear infinite;
}

@keyframes bannerTextScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .infoBannerContent > .sectionTitle-cards > h3 {
        animation: none;
        padding-left: 0;
    }
}