內容簡介
這款WordPress外掛可在Gutenberg區塊上添加滾動式動畫。
功能
從76種經過跨瀏覽器測試的CSS3動畫中選擇適合的，或者添加自定義動畫。
在編輯器中預覽動畫效果。
調整動畫的持續時間，延遲時間，滾動閾值和偏移量。
設置
持續時間：動畫的速度（以毫秒為單位）。
延遲：動畫開始前的等待時間（以毫秒為單位）。
閾值：當元素的x%進入屏幕時才添加動畫效果。
開始時透明度為0：設置元素在頁面加載時的透明度為0。此選項適用於通過CSS從0%透明度過渡到100%透明度的元素。
頂部偏移量（在區塊的高級設置中可用）：從頁面頂部向下移動所需的像素數。當頁面有固定的頂部導航欄時很有用。
類名“ab-animation-end”在CSS動畫結束後添加到動畫塊中。此類名可用於添加自定義樣式。
要求
建議使用PHP 5.6+，WordPress 5.0+和活動的Gutenberg區塊。
文檔
從佈局元素組中選擇Animated Block，然後在其中添加任何內容塊。 從下拉列表中選擇一個動畫，或添加自定義的CSS類。當用戶滾動到區塊時，所選擇的動畫或自定義CSS類將添加到區塊中。
Animated Block是父級區塊（一個容器），您可以在其中嵌套任意數量的區塊。
外掛標籤
開發者團隊
原文外掛簡介
Add scroll based animations to WordPress Gutenberg blocks.
Features
Choose from 76 cross-browser CSS3 animations or add your own
Preview animations in the editor
Adjust the animation duration, delay, scroll threshold, and offset
Settings
Duration: The speed of the animation in milliseconds.
Delay: How many milliseconds to wait before animating the element.
Threshold: Add animation when x% of the element enters the screen.
Start with opacity 0: Set the element to opacity 0 when the page loads. The option works for elements transitioning to 100% opacity through CSS.
Offset Top (available in the block’s advanced settings): Number of pixels to offset the animated block from the top of the page. Useful when a page has a fixed top navigation bar.
Class name “ab-animation-end” is added to the animated block after the CSS animation has ended. This class name can be used to add custom styles.
Requirements
PHP 5.6+ is recommended, WordPress 5.0+, and Gutenberg must be active.
Documentation
Select Animated Block from the Layout Elements group and add any content blocks within it. Select an animation from the dropdown list or add your own custom CSS class. The selected animation or custom CSS class will be added to the block when the user scrolls to it.
Animated Block is a parent block (a container), nesting as many blocks as you want.
