內容簡介
總結：Serend Animations 讓您能輕鬆地在任何 Gutenberg 區塊中添加令人驚豔的滾動動畫。只需選擇一個區塊，從下拉選單中選擇一個動畫，當訪客滾動頁面時，您的內容就會栩栩如生地展現。
<b>常見問題與解答：</b>
<ul>
<li><b>為什麼選擇 Serend Animations？</b></li>
<ul>
<li>極輕量級：純 CSS 動畫，最少 JavaScript - 僅 8KB 總和</li>
<li>符合 GDPR：無追蹤、無 cookies、無外部連線 - 100% 隱私合規</li>
<li>零依賴：無 jQuery、無第三方庫、無外部 CDN</li>
<li>極速快：GPU 加速的 CSS 動畫與 Intersection Observer</li>
<li>以安全為先：乾淨的程式碼，無外部要求，符合 WordPress 安全標準</li>
<li>無障礙性：自動尊重使用者運動偏好</li>
<li>支援白牌：無外掛品牌或臃腫的乾淨前端代碼</li>
</ul>
<li><b>如何操作？</b></li>
<ul>
<li>在 Gutenberg 編輯器中開啟任何區塊</li>
<li>在區塊檢查器面板中尋找"Serend Animation"</li>
<li>從下拉選單中選擇一個動畫</li>
<li>可選擇設定延遲以建立瀑布類似的動畫效果</li>
<li>保存並在前端查看您的動畫內容</li>
</ul>
</ul>
外掛標籤
開發者團隊
原文外掛簡介
Serend Animations makes it incredibly easy to add stunning scroll animations to any Gutenberg block. Choose an animation type, select a direction with intuitive arrow buttons, optionally enable slow motion, and watch your content come to life as visitors scroll through your page.
NEW in v1.0.3: Visual direction picker with arrow buttons! All animation types now support all 4 directions (top, right, bottom, left), plus a universal Slow Motion toggle for dramatic effects.
Why choose Serend Animations?
Visual Direction Control: Intuitive arrow buttons to select animation direction – no more guessing!
20 Animation Variants: 5 animation types × 4 directions = endless creative possibilities
Slow Motion Toggle: Make any animation 1.5x slower for more dramatic effects
Ultra Lightweight: Pure CSS animations with minimal JavaScript – only 8KB total
GDPR Friendly: No tracking, no cookies, no external connections – 100% privacy compliant
Zero Dependencies: No jQuery, no third-party libraries, no external CDNs
Lightning Fast: GPU-accelerated CSS animations with Intersection Observer
Security First: Clean code, no external requests, WordPress security standards
Accessibility Ready: Respects user motion preferences automatically
White Label Ready: Clean frontend code without plugin branding or bloat
Features
5 Animation Types with 4 Directions Each: 20 beautiful animation variants to choose from
Visual Direction Picker: Intuitive arrow buttons to select animation direction (top, right, bottom, left)
Slow Motion Toggle: Make any animation 1.5x slower for more dramatic effects
Staggered Animations: Use the delay slider to create cascading animation effects
One-Click Integration: No code required – just select an animation and direction
Performance Optimized: Uses native Intersection Observer API for smooth performance
Works with All Blocks: Compatible with every Gutenberg block
Clean Code: Pure CSS + vanilla JavaScript – no bloat, no dependencies
How It Works
Open any block in the Gutenberg editor
Look for “Serend Animation” in the block inspector panel
Choose an animation type (Fade, Zoom, Rotate, Bounce, or Flip)
Select a direction using the visual arrow buttons
Optionally enable “Slow Motion” for a more dramatic effect
Optionally set a delay for staggered effects
Click “Show Animation” to preview in the editor
Save and view your animated content on the frontend
Animation Types
Each animation type supports 4 directions (top, right, bottom, left):
Fade: Elements gracefully fade in while sliding from the selected direction
Zoom: Elements scale up from smaller size while moving from the selected direction
Rotate: Elements rotate while scaling and moving from the selected direction
Bounce: Elements bounce in with elastic effect from the selected direction
Flip: Elements flip in with 3D rotation (X-axis for top/bottom, Y-axis for left/right)
Plus, every animation can be made slower with the “Slow Motion” toggle for more dramatic effects!
Perfect For
GDPR-Compliant Websites: No tracking, no cookies, no privacy concerns
Performance-Critical Sites: Lightweight and fast-loading
Agency & Developer Projects: White label ready, clean code with no plugin branding
Landing Pages: Engaging animations without the bloat
Portfolio Websites: Showcase your work with beautiful effects
Business Sites: Stand out without compromising on speed or privacy
Blog Posts: Dynamic content reveals that respect user preferences
Client Projects: Safe, reliable animations with zero maintenance overhead
Developer Friendly
Pure CSS + Vanilla JS: No jQuery or framework dependencies
WordPress Coding Standards: Clean, secure, and maintainable code
Zero External Calls: No CDNs, APIs, or third-party services
White Label Frontend: No plugin branding or comments in generated HTML/CSS
Lightweight Footprint: Only 8KB total – smaller than most images
Extensible Architecture: Easy to customize with your own CSS
Debug Mode: Built-in tools for development and troubleshooting (enable via Settings → Serend Animations)
GDPR Compliant: No data collection, tracking, or external connections
Security Focused: Follows WordPress security best practices
Additional Information
Minimum Requirements
WordPress 6.0 or higher
PHP 7.4 or higher
Modern browser with JavaScript enabled
Contributing
This plugin is open source. Contributions are welcome.
