前言介紹
- 這款 WordPress 外掛「Animated Blocks on Scroll」是 2018-05-27 上架。
- 目前有 2000 個安裝啟用數。
- 上一次更新是 2024-02-04，距離現在已有 454 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.9 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
- 有 8 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
CSS3 | blocks | animation | animated block | css animations |
內容簡介
這款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.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Animated Blocks on Scroll」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0.0 | 1.0.1 | 1.0.2 | 1.0.3 | 1.0.4 | 1.0.5 | 1.0.6 | 1.1.0 | 1.1.1 | 1.1.2 |
延伸相關外掛（你可能也想知道）
Image Hover Effects For WPBakery Page Builder 》圖像懸停效果 - WPBakery Page Builder 是一個令人驚嘆的外掛程式，可讓用戶在圖像上添加40多種帶標題的懸停效果。此附加元件為 Visual Composer 添加了20個...。
Easy Textillate 》這個外掛允許你在文章、頁面或網站元件中使用shortcode向任何文字添加動畫，你也可以使用PHP代碼直接將文字動畫添加到主題檔案中。, 這個外掛完全利用了Texti...。
Tabs For WPBakery Page Builder (formerly Visual Composer) 》WPBakery Page Builder 的標籤唯一且首個插件, 這款 WPBakery Page Builder 的標籤插件非常簡單，它允許使用者將任何內容以不同的風格及配色方案放入標籤中。...。
Progress Bar 》此外掛只做一件事：建立一個簡單（但看起來不錯）的 CSS3 進度條，您可以使用自己的 CSS 进行樣式設計，並使用一個簡單的 shortcode 在任何地方使用。現在支...。
Page Transition 》Page Transition 是一個簡單易用的 WordPress 外掛程式，可使用 CSS3 動畫效果添加頁面轉換。讓您的網頁展現現代化的動畫效果。, 您可以為頁面進入和離開時分...。
Dynamic Word Spinner: CSS3 Animated Rotation 》CSS3 Rotating Words 可讓使用者添加多個詞語在一個句子中，並使用 CSS3 動畫效果隨機更換。, 您可以在一個句子中添加多個詞語，並在經過一段時間後更換成另...。
Standout CSS3 Buttons 》這款外掛參考Brian Gardner的博客文章，使用簡碼在您的網站上顯示時髦的CSS3梯度按鈕。, 您還可以在functions.php或插件中調用該外掛程序。可以選擇多種不同...。
Image Over Image For WPBakery Page Builder 》Image Over Image 是一個 WPBakery Page Builder 擴充套件，可以讓你在圖片上方加入一個圖片效果，當滑鼠移動過該圖片時，原有圖片便會被替換。此外，它還含...。
SvegliaT Buttons 》『SvegliaT Buttons』是一個簡單的 WordPress 外掛，可以透過 shortcode 在部落格中放置 CSS3 按鈕。, 您可以在 WordPress 中加入 shortcode，來展示好看且有...。
Easy Shortcode Buttons 》曾經想在您的網站上添加漂亮的下載連結嗎？需要添加號召行動的按鈕，但不想編寫程式碼？Easy Buttons 就是答案。這是將漂亮的按鈕添加到 WordPress 網站的最...。
Nice page transition 》這款 WordPress 外掛可以讓你選擇 6 種美麗的頁面轉場效果。 示範影片。你也可以在我的商店中查看其他 WordPress 專業外掛。。
Sliding Enquiry Form 》滑動詢價表單是一個簡單、易用且可完全自定義的 WordPress 外掛，可用於添加固定位置的彈出窗口，如頁腳左側、頁腳右側、左側或右側，並具有 CSS3 特效。, 使...。
HTML5 Slideshow Presentations 》屏幕展示外掛, , 使用本外掛，您可以利用 WordPress 原生工具建立簡報，而最好的部分是：完成後不需要上傳到 SlideShare。您可以隨時在自己的網站上分享/呈現...。
Amazing WPBakery Page Builder Addons 》這款外掛包含了超級實用的 WPBakery Page Builder 元素，擁有大量的選項，可以免費取得 WPBakery Page Builder 的所有功能，幫助您實現任何設計。, 您可以憑...。
WP Outdated Browser 》如果你很厭煩有人使用過時的瀏覽器造訪你現代化的網站，而且他們卻對此毫不在意，也許這些使用者不是高級用戶，或是你的阿姨使用一個落伍的瀏覽器試圖觀看令...。