Horizon Theme - include Ken Burns Zoom Animation

Deutsch Diskussion Technische Fragen & Antworten
1

„Ich möchte dem .hero__media-Bildelement im Horizon-Theme eine Ken-Burns-Zoom-Animation hinzufügen. Ich bin kein coder, mit Hilfe des KI-Assistenten habe ich die CSS-Keyframes kenBurnsInOut (Skalierung 1,0 → 1,18 → 1,0, 40 s, ease-in-out, unendlich) hinzugefügt und sie mit !important auf .hero__media angewendet, aber die Animation funktioniert nicht. Außerdem habe ich overflow: visible !important für .hero__container, .hero__media-wrapper und .hero__media gesetzt. Wir haben stundenlang versucht, das Problem zu beheben, aber nichts hat funktioniert. Was können wir tun?

2

Hey @SebastianH1 try this one by follow these steps Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

.hero__media img {
  animation: kenBurnsInOut 40s ease-in-out infinite !important;
  transform-origin: center center !important;
}

@keyframes kenBurnsInOut {
  0%, 100% { transform: scale(1.0); }
  50% { transform: scale(1.18); }
}

also make sure all parents wrappers have overflow: hidden not visible ken burns need the overflow hidden to mask the scaled edges

3

Hey Mustafa, thank you very much for your help. Unfortunately it did not work. I am not a coder and I did it together with the ai assitant and the AI said I did everything right but still does not work. I have the “Atelier” horizon Theme. Maybe it does not work with kenburns evect?

4

The Sidekick Assistent ask for help: “„All overflow: visible rules are original theme code, not mine. The animation is still not working after adding the CSS to both base.css and theme.liquid. You mentioned a ::after pseudo-element workaround if JS is overriding the transform. Please provide that exact code snippet.” Can anyone help? Many thanks!