zz-shopify-components 0.0.21 → 0.0.22

package/blocks/zz-scroll-animate-bg-text.liquid

@@ -1,268 +1,268 @@
-{% schema %}
-{
-  "name": "scroll animate bg text",
-  "class": "scroll-animate-bg-text",
-  "settings": [
-    {
-      "type": "color_background",
-      "id": "background_color",
-      "label": "背景颜色",
-      "default": "rgba(0,0,0,0)"
-    },
-    {
-      "type": "image_picker",
-      "id": "desktop_image",
-      "label": "PC端图片"
-    },
-   
-    {
-      "type": "image_picker",
-      "id": "mobile_image",
-      "label": "移动端图片"
-    },
-    {
-      "type": "richtext",
-      "id": "pc_title",
-      "label": "PC标题内容 (PC Title Content)",
-      "default": "<p>这里是标题</p>"
-    },
-    {
-      "type": "richtext",
-      "id": "mb_title",
-      "label": "移动标题内容 (Mobile Title Content)",
-      
-    },
-    {
-      "type": "select",
-      "id": "tag",
-      "label": "标题等级 (Heading Tag)",
-      "options": [
-        { "value": "h2", "label": "二级标题 (H2)" },
-        { "value": "h3", "label": "三级标题 (H3)" },
-        { "value": "h4", "label": "四级标题 (H4)" },
-        { "value": "h5", "label": "五级标题 (H5)" },
-      ],
-      "default": "h2"
-    },
-  
-    {
-      "type": "select",
-      "id": "pc_align",
-      "label": "标题 PC对齐方式",
-      "options": [
-        { "value": "left", "label": "左对齐 (Left)" },
-        { "value": "center", "label": "居中对齐 (Center)" },
-        { "value": "right", "label": "右对齐 (Right)" }
-      ],
-      "default": "center"
-    },
-    {
-      "type": "select",
-      "id": "mobile_align",
-      "label": "标题 移动对齐方式",
-      "options": [
-        { "value": "left", "label": "左对齐 (Left)" },
-        { "value": "center", "label": "居中对齐 (Center)" },
-        { "value": "right", "label": "右对齐 (Right)" }
-      ],
-      "default": "center"
-    },
-    {
-      "type": "range",
-      "id": "mb_top",
-      "min": 0,
-      "max": 100,
-      "step": 1,
-      "unit": "%",
-      "label": "移动端标题距离顶部高度百分比，单位%",
-      "default": 20
-    },
-      
-      {
-        "type": "color",
-        "id": "text_color",
-        "label": "文字颜色",
-        "default": "#000000"
-      },
-  
-
-  ],
-  "presets": [
-    {
-      "name": "Scroll Animate BG Text"
-    },
-    {
-      "name": "滚动背景放大文字动画"
-    }
-  ]
-}
-{% endschema %}
-
-<div class="sticky-section">
-  <div class="image-container tw-relative tw-w-full tw-h-full">
-    <div class="zz-scroll-animate-bg-image tw-w-full tw-h-full">
-      {% render 'zz-img',
-        pc_image: block.settings.desktop_image,
-        mb_image: block.settings.mobile_image,
-        image_alt: block.settings.alt | escape,
-        class_name: 'tw-w-full tw-h-full tw-object-cover',
-      %}
-
-    </div>
-    
-    <div class="text-overlay tw-absolute tw-w-full">
-      {% case block.settings.tag %}
-      {% when 'h2' %}
-        {% render 'zz-h2', 
-          title: block.settings.pc_title, 
-          title_mb: block.settings.mb_title | default: block.settings.pc_title,
-          title_color: block.settings.text_color,
-
-          class_name: 'scroll-animate-bg-title'
-        %}
-      {% when 'h3' %}
-        {% render 'zz-h3', 
-          title: block.settings.pc_title, 
-          title_mb: block.settings.mb_title | default: block.settings.pc_title,
-          title_color: block.settings.text_color,
-          class_name: 'scroll-animate-bg-title'
-        
-        %}
-      {% when 'h4' %}
-          {% render 'zz-h4', 
-            title: block.settings.pc_title, 
-            title_mb: block.settings.mb_title | default: block.settings.pc_title,
-            title_color: block.settings.text_color,
-            class_name: 'scroll-animate-bg-title'
-          %}
-      {% when 'h5' %}
-        {% render 'zz-h5', 
-          title: block.settings.pc_title, 
-          title_mb: block.settings.mb_title | default: block.settings.pc_title,
-          title_color: block.settings.text_color,
-          class_name: 'scroll-animate-bg-title'
-        %}
-    {% endcase %}
-
-    </div>
-  </div>
-</div>
-
-
-
-
-   
-
-<style>
- 
-  
-  #shopify-block-{{ block.id }} {
-    height: 150vh;
-    width: 100%;
-    position: relative;
-    background-color: {{ block.settings.background_color }};
-  }
-  #shopify-block-{{ block.id }} .sticky-section {
-    position: sticky;
-    width: 100%;
-    top: 0;
-    height: 100vh; 
-  }
-  #shopify-block-{{ block.id }} .scroll-animate-bg-title {
-    text-align: center;
-  }
-
-  @media screen and (max-width: 1023px) {
-    #shopify-block-{{ block.id }} {
-      
-    }
-    #shopify-block-{{ block.id }} .text-overlay {
-      position: absolute;
-      top: {{ block.settings.mb_top }}%;
-      left: 50%;
-      transform: translateX(-50%);
-      opacity: 0;
-      transition: opacity 0.2s linear;
-      max-width: 90%;
-      pointer-events: none;
-    }
-  
-  }
-  @media screen and (min-width: 1024px) {
-    #shopify-block-{{ block.id }} {
-      
-    }
-    #shopify-block-{{ block.id }} .text-overlay {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%,-50%);
-      max-width: 70%;
-    }
-  }
- 
-
-</style>
-
-
-<script>
-  
-
-  document.addEventListener('DOMContentLoaded', function(){
-    const block = document.getElementById('shopify-block-{{ block.id }}');
-    const image = block.querySelector('.zz-scroll-animate-bg-image');
-    const text = block.querySelector('.text-overlay');
-    let scrollListener = null;
-    function clamp(v, min = 0, max = 1) {
-      return Math.max(min, Math.min(v, max));
-    }
-
-    function updateOnScroll() {
-      console.log('updateOnScroll');
-      const rect = block.getBoundingClientRect();
-      const screenH = window.innerHeight;
-      const containerHeight = block.offsetHeight; // 150vh
-
-      // 滚动进度（0 ~ 150vh）
-      const scrollProgress = clamp(screenH - rect.top, 0, containerHeight);
-
-      // 1️⃣ scale 阶段：0 → 100vh
-      const scaleP = clamp(scrollProgress / screenH);
-      const scale = 0.6 + 0.4 * scaleP;
-      image.style.transform = `scale(${scale})`;
-
-      // 2️⃣ opacity 阶段：100vh → 150vh
-      const opacityP = clamp((scrollProgress - screenH) / (containerHeight - screenH));
-      text.style.opacity = opacityP;
-    }
-
-    // 创建 Intersection Observer 来监听 block 的可见性
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          // block 进入视口，添加 scroll 监听器
-          if (!scrollListener) {
-            scrollListener = updateOnScroll;
-            window.addEventListener('scroll', scrollListener);
-            window.addEventListener('resize', scrollListener);
-            console.log('Scroll listener added');
-          }
-        } else {
-          // block 离开视口，移除 scroll 监听器
-          if (scrollListener) {
-            window.removeEventListener('scroll', scrollListener);
-            window.removeEventListener('resize', scrollListener);
-            scrollListener = null;
-            console.log('Scroll listener removed');
-          }
-        }
-      });
-    }, {
-      threshold: 0 // 只要有任何部分进入视口就触发
-    });
-
-    observer.observe(block);
-    updateOnScroll();
-  });
-</script>
-
+{% schema %}
+{
+  "name": "scroll animate bg text",
+  "class": "scroll-animate-bg-text",
+  "settings": [
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "rgba(0,0,0,0)"
+    },
+    {
+      "type": "image_picker",
+      "id": "desktop_image",
+      "label": "PC端图片"
+    },
+   
+    {
+      "type": "image_picker",
+      "id": "mobile_image",
+      "label": "移动端图片"
+    },
+    {
+      "type": "richtext",
+      "id": "pc_title",
+      "label": "PC标题内容 (PC Title Content)",
+      "default": "<p>这里是标题</p>"
+    },
+    {
+      "type": "richtext",
+      "id": "mb_title",
+      "label": "移动标题内容 (Mobile Title Content)",
+      
+    },
+    {
+      "type": "select",
+      "id": "tag",
+      "label": "标题等级 (Heading Tag)",
+      "options": [
+        { "value": "h2", "label": "二级标题 (H2)" },
+        { "value": "h3", "label": "三级标题 (H3)" },
+        { "value": "h4", "label": "四级标题 (H4)" },
+        { "value": "h5", "label": "五级标题 (H5)" },
+      ],
+      "default": "h2"
+    },
+  
+    {
+      "type": "select",
+      "id": "pc_align",
+      "label": "标题 PC对齐方式",
+      "options": [
+        { "value": "left", "label": "左对齐 (Left)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "right", "label": "右对齐 (Right)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "select",
+      "id": "mobile_align",
+      "label": "标题 移动对齐方式",
+      "options": [
+        { "value": "left", "label": "左对齐 (Left)" },
+        { "value": "center", "label": "居中对齐 (Center)" },
+        { "value": "right", "label": "右对齐 (Right)" }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "range",
+      "id": "mb_top",
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%",
+      "label": "移动端标题距离顶部高度百分比，单位%",
+      "default": 20
+    },
+      
+      {
+        "type": "color",
+        "id": "text_color",
+        "label": "文字颜色",
+        "default": "#000000"
+      },
+  
+
+  ],
+  "presets": [
+    {
+      "name": "Scroll Animate BG Text"
+    },
+    {
+      "name": "滚动背景放大文字动画"
+    }
+  ]
+}
+{% endschema %}
+
+<div class="sticky-section">
+  <div class="image-container tw-relative tw-w-full tw-h-full">
+    <div class="zz-scroll-animate-bg-image tw-w-full tw-h-full">
+      {% render 'zz-img',
+        pc_image: block.settings.desktop_image,
+        mb_image: block.settings.mobile_image,
+        image_alt: block.settings.alt | escape,
+        class_name: 'tw-w-full tw-h-full tw-object-cover',
+      %}
+
+    </div>
+    
+    <div class="text-overlay tw-absolute tw-w-full">
+      {% case block.settings.tag %}
+      {% when 'h2' %}
+        {% render 'zz-h2', 
+          title: block.settings.pc_title, 
+          title_mb: block.settings.mb_title | default: block.settings.pc_title,
+          title_color: block.settings.text_color,
+
+          class_name: 'scroll-animate-bg-title'
+        %}
+      {% when 'h3' %}
+        {% render 'zz-h3', 
+          title: block.settings.pc_title, 
+          title_mb: block.settings.mb_title | default: block.settings.pc_title,
+          title_color: block.settings.text_color,
+          class_name: 'scroll-animate-bg-title'
+        
+        %}
+      {% when 'h4' %}
+          {% render 'zz-h4', 
+            title: block.settings.pc_title, 
+            title_mb: block.settings.mb_title | default: block.settings.pc_title,
+            title_color: block.settings.text_color,
+            class_name: 'scroll-animate-bg-title'
+          %}
+      {% when 'h5' %}
+        {% render 'zz-h5', 
+          title: block.settings.pc_title, 
+          title_mb: block.settings.mb_title | default: block.settings.pc_title,
+          title_color: block.settings.text_color,
+          class_name: 'scroll-animate-bg-title'
+        %}
+    {% endcase %}
+
+    </div>
+  </div>
+</div>
+
+
+
+
+   
+
+<style>
+ 
+  
+  #shopify-block-{{ block.id }} {
+    height: 150vh;
+    width: 100%;
+    position: relative;
+    background-color: {{ block.settings.background_color }};
+  }
+  #shopify-block-{{ block.id }} .sticky-section {
+    position: sticky;
+    width: 100%;
+    top: 0;
+    height: 100vh; 
+  }
+  #shopify-block-{{ block.id }} .scroll-animate-bg-title {
+    text-align: center;
+  }
+
+  @media screen and (max-width: 1023px) {
+    #shopify-block-{{ block.id }} {
+      
+    }
+    #shopify-block-{{ block.id }} .text-overlay {
+      position: absolute;
+      top: {{ block.settings.mb_top }}%;
+      left: 50%;
+      transform: translateX(-50%);
+      opacity: 0;
+      transition: opacity 0.2s linear;
+      max-width: 90%;
+      pointer-events: none;
+    }
+  
+  }
+  @media screen and (min-width: 1024px) {
+    #shopify-block-{{ block.id }} {
+      
+    }
+    #shopify-block-{{ block.id }} .text-overlay {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      max-width: 70%;
+    }
+  }
+ 
+
+</style>
+
+
+<script>
+  
+
+  document.addEventListener('DOMContentLoaded', function(){
+    const block = document.getElementById('shopify-block-{{ block.id }}');
+    const image = block.querySelector('.zz-scroll-animate-bg-image');
+    const text = block.querySelector('.text-overlay');
+    let scrollListener = null;
+    function clamp(v, min = 0, max = 1) {
+      return Math.max(min, Math.min(v, max));
+    }
+
+    function updateOnScroll() {
+      console.log('updateOnScroll');
+      const rect = block.getBoundingClientRect();
+      const screenH = window.innerHeight;
+      const containerHeight = block.offsetHeight; // 150vh
+
+      // 滚动进度（0 ~ 150vh）
+      const scrollProgress = clamp(screenH - rect.top, 0, containerHeight);
+
+      // 1️⃣ scale 阶段：0 → 100vh
+      const scaleP = clamp(scrollProgress / screenH);
+      const scale = 0.6 + 0.4 * scaleP;
+      image.style.transform = `scale(${scale})`;
+
+      // 2️⃣ opacity 阶段：100vh → 150vh
+      const opacityP = clamp((scrollProgress - screenH) / (containerHeight - screenH));
+      text.style.opacity = opacityP;
+    }
+
+    // 创建 Intersection Observer 来监听 block 的可见性
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          // block 进入视口，添加 scroll 监听器
+          if (!scrollListener) {
+            scrollListener = updateOnScroll;
+            window.addEventListener('scroll', scrollListener);
+            window.addEventListener('resize', scrollListener);
+            console.log('Scroll listener added');
+          }
+        } else {
+          // block 离开视口，移除 scroll 监听器
+          if (scrollListener) {
+            window.removeEventListener('scroll', scrollListener);
+            window.removeEventListener('resize', scrollListener);
+            scrollListener = null;
+            console.log('Scroll listener removed');
+          }
+        }
+      });
+    }, {
+      threshold: 0 // 只要有任何部分进入视口就触发
+    });
+
+    observer.observe(block);
+    updateOnScroll();
+  });
+</script>
+

package/blocks/zz-scroll-cover.liquid

@@ -1,67 +1,67 @@
-{% schema %}
-{
-  "name": "Scroll Cover Block",
-  "class": "zz-scroll-cover-block",
-  "settings": [
-    {
-      "type": "color_background",
-      "id": "background_color",
-      "label": "背景颜色",
-      "default": "rgba(0,0,0,0)"
-    },
-   
-  ],
-  "blocks": [
-    {
-        "type": "zz-flex-layout-bg-block",
-    }
-  ],
-  "presets": [
-    {
-      "name": "Scroll Cover Block"
-    },
-    {
-      "name": "滚动覆盖视图切换",
-    },
-  ]
-}
-{% endschema %}
-
-<style>
-  #shopify-block-{{ block.id }} .zz-scroll-cover-block-container {
-    width: 100%;
-    position: relative;
-    height: 200vh;
-  }
-  #shopify-block-{{ block.id }} .zz-scroll-cover-sticky-box {
-    position: sticky;
-      top: 0;
-      height: 100vh;
-      z-index: 10;
-  }
-  #shopify-block-{{ block.id }} .zz-scroll-cover-absolute-box {
-    position: absolute;
-      top: 100vh;
-      height: 100vh;
-      width: 100%;
-      z-index: 11;
-  }
-  
-</style>
-
-<div class="zz-scroll-cover-block-container">
-    {% content_for 'blocks' %}
-</div>
-<script>
-  const block = document.getElementById('shopify-block-{{ block.id }}');
-  const container = block.querySelector('.zz-scroll-cover-block-container');
-  const subBlcoks = container.querySelectorAll(':scope > div');
-    // 给每个 swiper-slide 添加 class swiper-slide
-    subBlcoks.forEach((block,index) => {
-      if(index === 0){
-        block.classList.add('zz-scroll-cover-sticky-box');
-      } else {
-        block.classList.add('zz-scroll-cover-absolute-box');
-      }
-    });
-</script>
+{% schema %}
+{
+  "name": "Scroll Cover Block",
+  "class": "zz-scroll-cover-block",
+  "settings": [
+    {
+      "type": "color_background",
+      "id": "background_color",
+      "label": "背景颜色",
+      "default": "rgba(0,0,0,0)"
+    },
+   
+  ],
+  "blocks": [
+    {
+        "type": "zz-flex-layout-bg-block",
+    }
+  ],
+  "presets": [
+    {
+      "name": "Scroll Cover Block"
+    },
+    {
+      "name": "滚动覆盖视图切换",
+    },
+  ]
+}
+{% endschema %}
+
+<style>
+  #shopify-block-{{ block.id }} .zz-scroll-cover-block-container {
+    width: 100%;
+    position: relative;
+    height: 200vh;
+  }
+  #shopify-block-{{ block.id }} .zz-scroll-cover-sticky-box {
+    position: sticky;
+      top: 0;
+      height: 100vh;
+      z-index: 10;
+  }
+  #shopify-block-{{ block.id }} .zz-scroll-cover-absolute-box {
+    position: absolute;
+      top: 100vh;
+      height: 100vh;
+      width: 100%;
+      z-index: 11;
+  }
+  
+</style>
+
+<div class="zz-scroll-cover-block-container">
+    {% content_for 'blocks' %}
+</div>
+<script>
+  const block = document.getElementById('shopify-block-{{ block.id }}');
+  const container = block.querySelector('.zz-scroll-cover-block-container');
+  const subBlcoks = container.querySelectorAll(':scope > div');
+    // 给每个 swiper-slide 添加 class swiper-slide
+    subBlcoks.forEach((block,index) => {
+      if(index === 0){
+        block.classList.add('zz-scroll-cover-sticky-box');
+      } else {
+        block.classList.add('zz-scroll-cover-absolute-box');
+      }
+    });
+</script>