Animation scroll-timline-name

Info

Hier wird ein HTML Element animiert anhand der Scrollleisten Position eines anderen, übergeordneten Elements, welches einen Scrollleisten Namen bekommt.

Wir haben hier das übergeordnete Element .scroller

Direkt darin liegt ein Element .infoBox

Desweiteren liegen unter .infoBox aber innerhalb von .scroller mehrere img Elemente.

scroll-timline-name

Der .scroller bekommt einen Namen für seine Scrollleiste zugewiesen. Der Name muss mit 2 Bindestrichten beginnen.
--gallery__scrollcontainer

scroll-timline-axis

scroll-timeline-axis kann man mit x oder inline versehen.
scroll-timeline-axis: inline;

Beide Eigenschaften kann man in der Kurzschreibweise: scroll-timeline zusammenfassen.

scroll-timeline: --gallery__scrollcontainer inline;

Das animierte Element

Das animierte Element ist eine ul mit der Klasse .subject, welche im Element .infoBox liegt.

Das Element .infoBox hat position: absolute es richtet sich am Vorfahren .scroller aus, da das position:relative hat. .infoBox bekommt keine Positionseigenschaften, wie left oder top, dadurch bleibt es an der Stelle liegen, wo es definiert ist, oben links in der Ecke von .scroller.

.infoBox bekommt eine feste Breite und Höhe und overflow:hidden

In .infoBox liegt die ul-Liste .subject welche auch mit position:absolute ausgezeichnet wird und welche animiert wird.

In der @keyframes Regel namens scrollInfo wird die vertikale Anfangsposition und Endposition definiert.

Wie üblich wird der Verweis auf diese scrollInfo @keyframes - Regel gesetzt und animation-timing-function: linear zugefügt.

Die richtige Scrollleiste wird hinzugefügt mit:

animation-timeline: --gallery__scrollcontainer;

Einschnappen

Damit das Scrollen bei jedem Bild einschnappt, bekommt .scroller
scroll-snap-type: x mandatory;

Die Bilder bekommen:
scroll-snap-align: center;

HTML

 <div class="scroller">
            <div class="infoBox">
            <ul class="subject">
            <li>Wasserturm</li>
            <li>Kühltürme</li>
            <li>Zahnrad</li>
            <li>Ofen</li>
            <li>Container</li>
            <li>Gerüst</li>
            </ul>
            </div>


            <img src="../img/ind1.jpg" alt="Wasserturm">
            <img> ...

            </div>

CSS

            .scroller img{
            scroll-snap-align: center;
            }

            .scroller {
            max-width: 300px;
            margin: auto;
            overflow-x: scroll;
            scroll-timeline: --gallery__scrollcontainer inline;
            scroll-snap-type: x mandatory;
            white-space: nowrap;
            }

            .infoBox {
            position: absolute;
            text-align: center;
            padding: 0;
            height: 1.5em;
            width: 5.5em;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.8);
            }

            .subject {
            padding: 0;
            list-style-type: none;
            margin: 0;
            position: absolute;
            bottom: -11em;
            animation-name: scrollInfo;
            animation-timing-function: linear;
            animation-timeline: --gallery__scrollcontainer;
             /*für Firefox*/
            animation-duration: 1ms;
            }

            .subject li {
            padding: 0.5em 5px;
            }

            @keyframes scrollInfo {
            from {
            bottom: -11em;
            }

            to {
            bottom: -0.3em;
            }
            }