前言介紹
- 這款 WordPress 外掛「AnimateGL Animations for WordPress – Elementor & Gutenberg Blocks Animations」是 2023-01-30 上架。 目前已經下架不再更新，不建議安裝使用。
- 目前有 2000 個安裝啟用數。
- 上一次更新是 2023-08-17，距離現在已有 626 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 5.4 以上。
- 有 21 人給過評分。
- 論壇上目前有 1 個提問，問題解答率 0%
外掛協作開發者
外掛標籤
animate | animation | block animations | elementor animations | gutenberg animations |
內容簡介
演示 | 文檔 | 支援
AnimateGL 是一個基於 WebGL 的最先進 WordPress 動畫外掛程式。
使用 AnimateGL，您可以為網站製作獨特且創意的進場動畫和滑鼠懸停動畫，令您的圖片生動活潑。通過使用 CSS 類別或 Visual 編輯器自定義動畫，並結合淡入、平移、旋轉和扭曲效果設計引人注目的進場動畫。AnimateGL 程式輕量快速，且易於使用，使其成為網頁設計師增強網站視覺吸引力的完美選擇。
功能
獨特而驚人的 WebGL 動畫
輕量快速，表現出色
易於使用
支援 Gutenberg Blocks 動畫
支援 Elementor 動畫
透過 CSS 類別在任何頁面構建器中使用 AnimateGL 動畫
將 WebGL 效果應用於圖片或任何 HTML 元素上
完全可自定義的動畫
具備即時編輯器
進場動畫預設方案
針對捲動觸發的進場動畫
滑鼠移動動畫
更多新功能正在開發中，包括滾動動畫
Gutenberg Blocks 動畫
在任何 Gutenberg Blocks 中新增進場動畫。在區塊設定控制項中選擇動畫類型、方向、延遲和持續時間。
Elementor 動畫
在 Elementor 中為任何元素新增進場動畫。在元素的進階選項中，選擇動畫類型、方向、延遲和持續時間。
在任何頁面構建器中使用 AnimateGL 動畫
只需添加 CSS 類別即可新增 AnimateGL 進場動畫。此方法可在任何頁面構建器中使用。
進場動畫
新增預設進場動畫之一，或自行設計進場動畫。通過添加 CSS 類別將動畫添加至圖片。
進場動畫:
淡入
滑動
拉伸
彎曲
擦除
翻轉
對每個動畫自定義方向、持續時間和延遲時間。
透過 CSS 類別自定義動畫屬性:
淡入 – 包括方向淡出和閾值選項
平移 – 包括 x、y 和 z 方向選項
旋轉 – 包括 x、y 和 z 軸選項
角落扭曲 – 增加動畫多樣性
持續時間 – 自定義動畫長度
延遲時間 – 自定義動畫開始時間
緩和效果 – 自定義動畫速度和流暢度
滑鼠效果
AnimateGL 還提供滑鼠驅動的扭曲效果，包括:
拉扯 – 包括強度、大小、RGB 移位和緩和等選項
觸發式捲動動畫
當元素進入畫面時觸發動畫，該元素的中心進入視口。
即時編輯器
使用即時編輯器建立自定義進場動畫並修改滑鼠拉扯效果。
AnimateGL 是 WordPress 最強大最先進的 WebGL 動畫外掛程式，有了其 33KB 壓縮後的輕量級程式和無依賴性，AnimateGL 快速易用，是網頁設計師增加獨特動畫的完美選擇。
原文外掛簡介
Demo | Documentation | Support
Add CSS and WebGL animations easily to any element on the website with AnimateGL plugin.
Add CSS and WebGL animations in Elementor, Block editor or any other builder. Customize direction, duration, delay and easing for each animation. Choose simple CSS animations like fade, slide, zoom and wipe or creative WebGL animations like bend, flip, stretch or directional fade. Create custom entrance animation with visual editor. AnimateGL is lightweight, fast, and easy to use, making it the perfect choice for web designers looking to enhance their website’s visual appeal.
Features
Add Entrance animation to any element or block
CSS Entrance animations Fade, Zoom In, Zoom out, Wipe, Slide Reveal
WebGL Entrance animations Bend, Flip, Peel, Wipe, Zoom, Directional Fade
Fully customizable animation direction, duration, delay, easing
Gutenberg Blocks animations
Elementor animations
CSS class animations
Nested animations
Lock to scrollbar
Repeat or play once on first enter the viewport
Live editor for creating custom animation
Preset animations
Scroll triggered Entrance animations
Easy to use
Lightweight
Great performance
CSS animations
CSS entrance animations are GPU accelerated and animate CSS properties opacity, transform and clip path in different combinations. CSS animations can be added to any element or block. Available CSS animations are Fade, Zoom In, Zoom Out, Wipe and Slide with settings for direction, distance, duration, delay and easing. With combination of fade, zoom, direction, easing and delay you can create unlimited number of creative elegant animations. More CSS animations coming soon.
CSS Entrance animations:
Fade
Zoom In
Zoom Out
Wipe
Slide
WebGL animations
WebGL animations convert any element to image with html2canvas.js, then apply effects to image with custom GLSL shaders. Best use is for simple elements like heading, button or image. With WebGL we can create effects that are not possible with CSS, like 3D distortions or gradient fade, and add those effects to any element on the page.
WebGL Entrance animations:
Fade
Slide
Stretch
Bend
Flip
Zoom
Peel
Lightweight
Only 35kb for CSS animations, additional 45kb if WebGL animations are used.
Elementor animations
Add Entrance animation to any element in Elementor. Select animation type, direction, distance, delay, duration and easing in the Element Advanced tab.
Gutenberg Blocks animations
Add Entrance animation to any Gutenberg block. Select animation type, direction, distance, delay, duration and easing in the block inspector controls.
Entrance Animations via CSS class
If you don’t use Elementor or Gutenberg blocks, you can still use AnimateGL via CSS classes. Add one of preset entrance animations or custom entrance animation to any element on the page by adding the animation CSS class.
More animations available with Entrance pack:
Circle (CSS)
Square (CSS)
Line (CSS)
Customize direction, duration, easing and delay for each animations
Customize animation properties via CSS class:
Fade – with options for directional fade and threshold
Translate – with options for x, y, and z direction
Rotation – with options for x, y, and z axis
Corners Distortion – for added animation variety
Duration – customize the length of the animation
Delay – customize the start time of the animation
Easing – customize the speed and flow of the animation
Repeat
By default, entrance animation will play when element enters the viewport for the first time. With option repeat enabled, the animation will play each time element enters the viewport.
Lock to scrollbar
Instead of fixed duration entrance animation, we can make the animation progress depend on the scroll position of the element. If the element is below the viewport, the animation progress will be 0. As we scroll the page down, and element is moving towards the middle of the viewport, the animation progresses. The end of animation is when element reches the middle of the viewport. Lock to scrollbar option can be enabled for any animation.
Mouse Effects
AnimateGL also offers mouse-driven distortion effects, including:
Pull – with options for strength, size, RGB shift, and ease
Scroll triggered animations
Entrance animation is played when when the element enters the viewport, when it becomes visible on the screen.
Viewport entrance threshold
By default, entrance animation start to play when 70% or 200px of the element enters the viewport.
Live Editor
Use live editor to create your custom entrance animation.
Enhance the visual appeal of your website with AnimateGL, the most powerful and advanced WebGL animation plugin for WordPress. With its lightweight 33kb gzipped size and no dependencies, AnimateGL is fast, easy to use, and the perfect choice for web designers looking to add unique animations to their website.
Use with any page builder
AnimateGL can be used with any page buidler: Elementor and Gutenberg blocks editor, Visual composer and others, because animations can be added simply by adding a CSS class. Add unique animations in Elementor, Visual Composer or Guteberg blocks editor with AnimateGL.
Help us improve
If you have any problem or feature request for this plugin, please feel free to open a ticket!
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「AnimateGL Animations for WordPress – Elementor & Gutenberg Blocks Animations」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0 | 1.1 | 1.2 | 1.3 | 1.4 | 1.0.1 | 1.0.2 | 1.0.3 | 1.0.4 | 1.0.5 | 1.0.6 | 1.0.7 | 1.0.8 | 1.0.9 | 1.1.1 | 1.1.2 | 1.1.3 | 1.1.4 | 1.1.5 | 1.1.6 | 1.1.7 | 1.2.1 | 1.2.2 | 1.2.3 | 1.2.4 | 1.2.5 | 1.2.6 | 1.2.7 | 1.2.8 | 1.2.9 | 1.3.1 | 1.3.2 | 1.3.3 | 1.3.4 | 1.3.5 | 1.3.6 | 1.3.7 | 1.3.8 | 1.3.9 | 1.4.1 | 1.4.2 | 1.4.3 | 1.4.4 | 1.4.5 | 1.4.6 | 1.4.7 | 1.4.8 | 1.4.9 | trunk | 1.2.10 | 1.2.11 | 1.2.12 | 1.4.10 | 1.4.11 | 1.4.12 | 1.4.13 | 1.4.14 | 1.4.15 | 1.4.16 | 1.4.17 | 1.4.18 | 1.4.19 | 1.4.20 | 1.4.21 | 1.4.22 | 1.4.23 |
延伸相關外掛（你可能也想知道）
暫無相關外掛推薦。