內容簡介
HTML部分的使用：
<ul>
<li>Shapes Smart Scroll Animations 是一個微型工具，專為需要清晰入場動畫但不需要外部庫的開發者和設計師設計。</li>
<li>這個外掛使用智能網格延遲邏輯來檢測您的佈局結構，自然地為元素添加動畫，不論它們處於多列桌面網格還是單列手機視圖。</li>
</ul>
技術優勢說明：
<ul>
<li><strong>智能網格延遲邏輯：</strong> 核心是 calculateColumnsInGroup 演算法。插件動態檢查元素的物理位置，並在新行開始時重置延遲計數器，使得動畫在任何屏幕尺寸上看起來專業和完美地交錯。</li>
<li><strong>性能（Vanilla JS）：</strong> 沒有依賴：沒有 jQuery、GSAP、重型框架。採用超輕量級腳本。IntersectionObserver API：使用現代瀏覽器 API 檢測滾動，比監聽滾動事件更有效。GPU加速：CSS 屬性使用 will-change 來提前通知瀏覽器，從而將渲染卸載到 GPU 以實現平滑動畫。</li>
<li><strong>首重無障礙設計：</strong> 外掛自動尊重用戶的操作系統設置。如果訪客在其系統（Windows、macOS、iOS、Android）中啟用了「降低動畫效果」，外掛將自動禁用所有入場動畫，以防止晕動症。</li>
<li><strong>開發者友好：</strong> 沒有 JS 回退：如果 JavaScript 失敗或被禁用，元素將保持完全可見（opacity: 1）。您的內容是安全的。CSS 變數：我將硬編碼值移至 CSS 自定義屬性（:root）。您可以直接在主題的 CSS 中全局更改動畫持續時間、easing 或距離，而無需編輯插件文件。簡單的類別系統：只需添加 .shps-animated 和一個效果類別。</li>
</ul>
外掛標籤
開發者團隊
② 後台搜尋「Shapes Smart Scroll Animations」→ 直接安裝（推薦）
原文外掛簡介
Shapes Smart Scroll Animations is a micro-tool designed for developers and designers who need clean entrance animations without external libraries.
This plugin uses a Smart Grid Delay logic to detect your layout structure and animate elements naturally, whether they are in a multi-column desktop grid or a single-column mobile view.
How does it work?
Here is a deep dive into the technical advantages of Shapes Smart Scroll Animations plugin:
1. Smart Grid Delay logic
The core of this plugin is the calculateColumnsInGroup algorithm. Instead of forcing you to write complex media queries for animation delays, the plugin:
Dynamically checks the physical position (offsetTop) of elements.
Detects when a new row begins.
Resets the delay counter for every new row.
Result: Animations look professional and perfectly staggered on any screen size automatically.
2. Performance (Vanilla JS)
Zero Dependencies: No jQuery, no GSAP, no heavy frameworks. The script is ultra-lightweight.
IntersectionObserver API: I use the modern browser API to detect scrolling, which is much more efficient than listening to the scroll event.
GPU Acceleration: CSS properties use will-change to inform the browser ahead of time, offloading rendering to the GPU for smooth animations.
3. Accessibility first
This plugin automatically respects the user’s operating system preferences.
Reduced Motion Support: If a visitor has “Reduce Motion” enabled in their system (Windows, macOS, iOS, Android), the plugin automatically disables all entrance animations to prevent motion sickness.
Inclusive Design: Your site remains compliant with modern web standards without extra work.
4. Developer friendly
No-JS Fallback: If JavaScript fails or is disabled, elements remain fully visible (opacity: 1). Your content is safe.
CSS Variables: I moved hardcoded values to CSS Custom Properties (:root). You can globally change animation duration, easing, or distance directly in your theme’s CSS without editing plugin files.
Simple Class System: Just add .shps-animated and an effect class.
Available effects
Slide Up: .shps-slide-up (Classic elegant entrance)
Zoom Out: .shps-zoom-out (Modern scaling effect)
Slide Right: .shps-slide-right
Slide Left: .shps-slide-left
How to use?
Single Element: Add shps-animated shps-slide-up to any HTML element or Block.
Grid/Group: Wrap elements in a container with class shps-group to enable the Smart Grid Delay.
Example HTML:
Manual delays & overrides
You have two ways to control delays manually if you want to highlight specific items.
Method 1: Helper Classes (Recommended for static HTML)
Use these classes to set a fixed delay. The plugin will detect them and skip the automatic calculation for that specific element.
.shps-delay-100 (0.1s) … to .shps-delay-1000 (1.0s). Numeric values in increments of 100.
Method 2: CSS Overrides (Recommended for dynamic loops)
If you are generating lists via PHP (e.g., WordPress Loop) and cannot add specific classes to individual items, use CSS with !important to override the inline styles applied by the plugin.
/* Example: Force 3rd item to wait 1 second */
.shps-group .shps-animated:nth-child(3) {
transition-delay: 1.0s !important;
}
Security & privacy
This plugin is designed to be safe and lightweight:
100% GDPR Compliant: No external calls, no tracking, no cookies, and no IP collection.
Zero Dependencies: Written in pure Vanilla JS. No jQuery or external libraries that could cause conflicts.
Database Free: The plugin does not perform any database queries (SQL), ensuring zero risk of injection attacks.
Self-Contained: All assets are loaded locally. No reliance on external CDNs.
