Animated GIF über ein Foto legen - wie geht das?

    Auf meiner neuen Website möchte ich jeden Beitrag mit einem Foto beginnen. Das Foto alleine wäre aber zu wenig attraktiv. Und so möchte ich, dass sobald der Beitrag mit seinem Foto im Viewport erscheint, eine kurze Animation startet wie z.B. dass eine gezeichnete Katze durch das Bild / Foto läuft.

    Hierzu muss nicht nur die Animation starten, sobald die Bedingung erfüllt ist "Bild im Viewport", sondern auch berücksichtigt werden, dass die Grafik in der Größe an das Foto angepasst werden muss – notfalls über @media screenwidth, besser aber über "object-fit: cover", denn die Fotos lade ich in drei Größen und manipuliere sie zusätzlich mittels "object-fit: cover".


    Meine Fragen:

    Wie kann ich mein Ziel am einfachsten erreichen? – oder: Was benötigt technisch den geringsten Aufwand? CSS oder Scripting oder…

    Wie lade ich überhaupt das Foto und darüber liegend das animierte GIF?

    Das klingt aufwendig. Nicht umsonst sind die ganzen GIF-Spielereien seite Jahren bzw. Jahrzenten aus dem www verschwunden. Sie stören und sind einfach nervig.


    Vermutlich wirst du nicht um Javascript herum kommen. Ansatzpunkt wäre, beide Bilder in einen Div-Container zu legen und das animierte absolut zu positionieren und per z-index darüber zu legen. Breite und Höhe des animierten Bildes würde das Javascript vom anderen Bild aus berechnen. Damit ein Event getriggert wird, wenn ein Bild im Viewport auftaucht, wirst du sowas wie scrollSpy o.Ä. brauchen und solltest prüfen, ob dein Template oder Template Framework bereits da was anbietet (vermutlich nicht), also nachrüsten.