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?