內容簡介
Jupa Blocknimations 外掛為現有的區塊（如段落、圖片、欄位等）添加動畫控制，無需新增區塊或額外標記。用戶可以選擇精選的動畫或完整的 Animate.css 動畫目錄，提升網站的互動性。
【主要功能】
• 支援多種區塊的動畫效果
• 提供 97 種 Animate.css 動畫
• 自動調整滾動位置的動畫觸發
• 尊重系統的減少動作設定
• 僅在需要時加載動畫 CSS 和腳本
外掛標籤
開發者團隊
原文外掛簡介
Jupa Blocknimations adds animation controls directly to the blocks you already use (paragraph, image, columns, group, and more) — no new block, no extra markup. Pick from a curated shortlist or the full Animate.css catalog (97 animations, plus 4 custom “Reveal” wipes).
On Enter (default): plays once the first time a block scrolls into view, staggering blocks that enter together. Works in every browser.
Scroll driven: ties the animation to scroll position via native CSS (animation-timeline), falling back to “On Enter” automatically where unsupported.
Respects reduced motion: with the OS “reduce motion” setting, animated blocks render in their final state — no movement.
Loads only where needed: pages without an animated block skip the animation CSS and script entirely.
No animation JS library is bundled — just a small IntersectionObserver (under 1KB) plus plain CSS. Animations are real Animate.css classes and CSS custom properties, so they’re easy to override from your own CSS (e.g. --animate-duration, --animate-distance, or any property with !important).
A note on restraint: animation is a great touch, but overusing it or mixing too many effects tends to hurt more than it helps. That’s why the toolbar leads with a short, curated shortlist — the full catalog is one click away via “More Animations…” when you actually need it.
How to Use
Select a supported block (paragraph, heading, image, gallery, group, columns, button, cover, video, and more).
Three icons appear in its toolbar:
Animation: the curated shortlist, or More Animations… for the full catalog.
Delay: a fixed 200ms–3000ms delay, or leave on “None” for automatic staggering.
Type: click to switch between On Enter and Scroll driven (hides Delay, which has no effect there).
Preview on the front end — animations only run there, never in the editor.
Source Code
Full source, including build tools, is at https://github.com/jupa8712/jupa-blocknimations. The build/ folder is compiled from src/ via @wordpress/scripts — run npm install then npm run build to regenerate it.
Credits
“Scroll down” icon (https://www.magnific.com/animated-icon/scroll-down_17905763) — Designed by Magnific (https://www.magnific.com).
