Animiertes jpg Startseite

Technical Q&A
, , ,

Topic summary

Ein Nutzer möchte auf der Startseite seines Shopify-Stores (Dawn Theme 15.3.0) ein Bild mit kontinuierlichem Zoom-Effekt implementieren – das Bild soll von 50% auf 100% zoomen und sich in einer Schleife wiederholen.

Bisherige Lösungsversuche:

  • CSS-Animation mit @keyframes scheiterte (wird als Fehler angezeigt, vermutlich nicht von Shopify unterstützt)
  • JavaScript-Lösung wurde implementiert durch:
    • Code-Einfügung in theme.liquid vor dem schließenden body-Tag
    • Anpassung der slideshow.liquid-Datei

Aktuelles Problem:

  • Die Animation funktioniert nicht
  • Folgende Zeile in slideshow.liquid wird als fehlerhaft markiert: <img src="{{ block.settings.image | img_url: 'large' }}" alt="Zoom Image" class="zoom-image">

Der Nutzer sucht nach Hilfe zur Fehlerkorrektur und erfolgreichen Implementierung des Zoom-Effekts.

Status: Ungelöst, keine Antworten bisher.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hallo zusammen,

ich möchte auf meiner Startseite (Dawn Version 15.3.0) ein Bild einfügen das ausschauen soll wie ein Video indem es gezoomt wird und das dann in Schleife. Gezoomtes Bild von ca 50 % zoomt langsam auf Originalgröße und fängt dann wieder bei 50 % an.

Ich habe es zuerst mit einer CSS-Animation versucht aber @keyframe wurde mir immer als Fehler angezeigt, wird glaub von Shopify nicht unterstützt.

Dann habe ich es mit einem Java Script versucht. Folgendes habe ich am Ende des theme.liquid eingefügt, vor dem abschließendem body-tag.

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if settings.cart_type == ‘drawer’ -%}

{%- endif -%}

Zusätzlich habe ich dann noch den Code von slideshow.liquid folgendermaßen angepasst:

{% if block.settings.mp4_video != blank %}
{{ block.settings.mp4_video | video_tag:autoplay: true, loop: true, muted: true, controls: false, playsinline:"playsinline", width:'100%', height:'100%' }}
{% if block.settings.mobile_mp4_video != blank %}
{{ block.settings.mobile_mp4_video | video_tag:autoplay: true, loop: true, muted: true, controls: false, playsinline:"playsinline", width:'100%', height:'100%' }}
{% endif %} {% else %} {%- if block.settings.mob_image != blank -%} {{ block.settings.mob_image | image_url: width: 3840 | image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority, class:"mobile_img_cls" }} {% endif %} {%- if block.settings.image -%} {%- liquid assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round assign sizes = '100vw' assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' assign fetch_priority = 'auto' -%}
Zoom Image
{%- else -%} {%- assign placeholder_slide = forloop.index | modulo: 2 -%} {%- if placeholder_slide == 1 -%} {{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%} {%- endif -%} {% endif %}

Mein Bild habe ich ganz normal unter der Slideshow als Desktop Image eingefügt. Leider funktioniert aber die Animation nicht und folgende Zeile im slideshow.liquid wird mir unterkringelt: Zoom Image

Kennt sich damit jemand aus? Kann mir jemand weiterhelfen?

Vielen Dank und viele Grüße,

Resalmimbesal