Marquee Ticker im Shop realisieren

Bei so manchen Online-Shop kannst du oben im Header einige verkaufsstarke Argumente sehen, die für den Online-Shop sprechen. Solche so genannten Ticker bzw. Marquee Texte sind sehr beliebt und bringen die Vorteile für den Kunden auf den Punkt. Möchtest du ebenfalls so einen Ticker in deinem Online-Shop realisieren, so benötigst du dafür nur etwas HTML-Code und CSS-Code. Ein Glück, dass wir dir beides dafür zur Verfügung stellen, oder nicht?

Willst du ein Demo des Tickers sehen, so wechsle auf den Shop von austriavital.

HTML Code für den Ticker-Text

<div class="marquee">
        <ul class="marquee__content">
            <li>Text 1</li>
            <li>Text 2</li>
            <li>Text 3</li>
            <li>Text 4</li>
            <li>Text 5</li>
            <li>Text 6</li>
            <li>Text 7</li>
        </ul>
        <ul aria-hidden="true" class="marquee__content">
            <li>Text 1</li>
            <li>Text 2</li>
            <li>Text 3</li>
            <li>Text 4</li>
            <li>Text 5</li>
            <li>Text 6</li>
            <li>Text 7</li>
        </ul>
    </div>

CSS Code für den Ticker-Text

        .marquee {
            --gap: 55px;
            position: relative;
            display: flex;
            overflow: hidden;
            user-select: none;
            gap: var(--gap);
            background-color: #2F5737; 
            padding: 0px 0;
        }

        .marquee__content {
            flex-shrink: 0;
            display: flex;
            justify-content: space-around;
            gap: var(--gap);
            min-width: 100%;
            animation: scroll 40s linear infinite;
            list-style: none; /* Entfernt die Punkte */
            padding: 0;
            margin: 0;
        }

        @keyframes scroll {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(calc(-100% - var(--gap)));
            }
        }

        /* Absolute positioning for smooth transition */
        .marquee--pos-absolute .marquee__content:last-child {
            position: absolute;
            top: 0;
            left: 0;
        }

        .marquee__content > * {
            flex: 0 0 auto;
            color: white; 
            font-size: 14px; 
            font-weight: bold; 
            margin: 0px;
            padding: 15px 15px;
            border-radius: 0.25rem;
            text-align: center;
        }