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.
</script>
{%- if settings.predictive_search_enabled -%}
<script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- if settings.cart_type == 'drawer' -%}
<script src="{{ 'cart-drawer.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<script>
window.onload = function() {
const zoomImage = document.querySelector('.zoom-image');
if (zoomImage) {
function startZoom() {
zoomImage.style.transition = 'transform 10s ease-in-out';
zoomImage.style.transform = 'scale(1)'; // Normalgröße
setTimeout(() => {
zoomImage.style.transition = 'transform 10s ease-in-out';
zoomImage.style.transform = 'scale(1.5)';
}, 1000); // Startet nach 1 Sekunde
}
startZoom();
}
};
</script>
Zusätzlich habe ich dann noch den Code von slideshow.liquid folgendermaßen angepasst:
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %} {% if block.settings.mob_image != blank %}mobile_img_cover{% endif %}">
{% if block.settings.mp4_video != blank %}
<div class="hero_desktop_video {% if block.settings.mobile_mp4_video != blank %}desktop_hide_video{% endif %}">
{{ block.settings.mp4_video | video_tag:autoplay: true, loop: true, muted: true, controls: false, playsinline:"playsinline", width:'100%', height:'100%' }}
</div>
{% if block.settings.mobile_mp4_video != blank %}
<div class="hero_mobi_video">
{{ block.settings.mobile_mp4_video | video_tag:autoplay: true, loop: true, muted: true, controls: false, playsinline:"playsinline", width:'100%', height:'100%' }}
</div>
{% 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'
-%}
<!-- Dein benutzerdefiniertes Bild mit Zoom-Effekt -->
<div class="zoom-image-container">
<img src="{{ block.settings.image | img_url: 'large' }}" alt="Zoom Image" class="zoom-image">
</div>
{%- 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 %}
</div>
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: <img src="{{ block.settings.image | img_url: 'large' }}" alt="Zoom Image" class="zoom-image">
Kennt sich damit jemand aus? Kann mir jemand weiterhelfen?
Vielen Dank und viele Grüße,
Resalmimbesal
