前言介紹
- 這款 WordPress 外掛「Animate on Scroll」是 2023-02-13 上架。
- 目前有 3000 個安裝啟用數。
- 上一次更新是 2024-04-08，距離現在已有 391 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.8 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 有 5 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
aryadhiratara | thinkdigitalway |
外掛標籤
aos | scroll | animate | animation | scroll animation |
內容簡介
使用熱門的 AOS JS 庫，透過新增 class names 完成任何元素的滾動動畫效果。
此外掛可協助您簡單接合 AOS JS 庫，以新增任何滾動動畫效果至 WordPress 網站。
此外掛可適用於原生的古鐵鎚核心區塊或任何可供元素新增自定義類別名稱的頁面建立器。
關於 AOS
AOS 是由 Michał Sajnóg 所建立的小型 JavaScript 庫，允許您在使用者滾動網頁時，加入動畫效果至 HTML 元素在進入畫面中的過程中。AOS 提供一組預設的 CSS 動畫，可透過 HTML 代碼中的簡單資料屬性輕鬆套用至元素。
可前往 AOS 的示範和文件頁面查看：demo 和 documentation。
如何新增動畫效果？
只需在元素類別名稱中新增所需的 AOS 動畫，並在前面加上「aos-」前綴字元，此外掛將自動新增對應的 aos 屬性至元素標籤。
以下是淡入淡出動畫：
淡入淡出： aos-fade
由下淡入： aos-fade-up
由上淡入： aos-fade-down
由左淡入： aos-fade-left
由右淡入： aos-fade-right
由右上往下淡入： aos-fade-up-right
由左上往下淡入： aos-fade-up-left
由右下往上淡入： aos-fade-down-right
由左下往上淡入： aos-fade-down-left
翻轉動畫：
由下翻轉： aos-flip-up
由上翻轉： aos-flip-down
由左翻轉： aos-flip-left
由右翻轉： aos-flip-right
滑動動畫：
由下滑入： aos-slide-up
由上滑入： aos-slide-down
由左滑入： aos-slide-left
由右滑入： aos-slide-right
縮放動畫：
進入縮放： aos-zoom-in
進入由下往上縮放： aos-zoom-in-up
進入由上往下縮放： aos-zoom-in-down
進入由左往右縮放： aos-zoom-in-left
進入由右往左縮放： aos-zoom-in-right
退縮： aos-zoom-out
退縮由下往上： aos-zoom-out-up
退縮由上往下： aos-zoom-out-down
退縮由左往右： aos-zoom-out-left
退縮由右往左： aos-zoom-out-right
動畫設定
預設全域動畫設定為：
位移: -100
持續時間：1100
緩和動畫: ease
延遲：0
執行一次: true
您可以使用篩選器更改此設定：
add_filter( 'aos_init', function($aos_init) {
返回：
var aoswp_params = {
"offset":"200",
"duration":"1800",
"easing":"ease-in-out",
"delay":"0",
"once": false};
';
} );
或在元素中新增以下額外類別以使用個別設定。此外掛將自動新增對應的 aos 屬性至標籤中。
一次行為:
once=true: aos-once-true
once=false: aos-once-false
緩和函數:
線性: aos-easing-linear
緩和: aos-easing-ease
加速緩和: aos-easing-ease-in
減速緩和: aos-easing-ease-out
加減速緩和: aos-easing-ease-in-out
往後緩和: aos-easing-ease-in-back
往後減速緩和: aos-easing-ease-out-back
加減速往後緩和: aos-easing-ease-in-out-back
正弦加速緩和: aos-easing-ease-in-sine
正弦減速緩和: aos-easing-ease-out-sine
原文外掛簡介
Animate any Elements on scroll using the popular AOS JS library simply by adding class names.
This plugin helps you integrate easily with AOS JS library to add any AOS animations (on scroll animation) to WordPress.
It should work well with the native gutenberg core blocks or any page builder (tested with GenerateBlocks and Elementor) that provides an input field for adding custom class names to elements.
About AOS
AOS is a small JavaScript library built by Michał Sajnóg that allows you to add animated effects to HTML elements when they come into view as the user scrolls down a webpage. AOS provides a set of predefined animations using CSS that can be easily applied to elements using simple data attributes in the HTML code.
Check out the AOS demo and documentation.
How to add Animations?
Simply add the desired AOS animation to your element class name with “aos-” prefix and the plugin will add the corresponding aos attribute to the element tag.
Fade animations:
fade: aos-fade
fade-up: aos-fade-up
fade-down: aos-fade-down
fade-left: aos-fade-left
fade-right: aos-fade-right
fade-up-right: aos-fade-up-right
fade-up-left: aos-fade-up-left
fade-down-right: aos-fade-down-right
fade-down-left: : aos-fade-down-left
Flip animations:
flip-up: aos-flip-up
flip-down: aos-flip-down
flip-left: aos-flip-left
flip-right: aos-flip-right
Slide animations:
slide-up: aos-slide-up
slide-down: aos-slide-down
slide-left: aos-slide-left
slide-right: aos-slide-right
Zoom animations:
zoom-in: aos-zoom-in
zoom-in-up: aos-zoom-in-up
zoom-in-down: aos-zoom-in-down
zoom-in-left: aos-zoom-in-left
zoom-in-right: aos-zoom-in-right
zoom-out: aos-zoom-out
zoom-out-up: aos-zoom-out-up
zoom-out-down: aos-zoom-out-down
zoom-out-left: aos-zoom-out-left
zoom-out-right: aos-zoom-out-right
Animation Settings
By default, the global animation settings are
offset: -100
duration: 1100
easing: ease
delay: 0
once: true
you can change that using filter:
add_filter( 'aos_init', function($aos_init) {
return '
var aoswp_params = {
"offset":"200",
"duration":"1800",
"easing":"ease-in-out",
"delay":"0",
"once": false};
';
} );
or add the extra classes below to the element for individual settings. The plugin will add the corresponding aos attribute to the tag.
Once behavior:
once=true: aos-once-true
once=false: aos-once-false
Easing functions:
linear: aos-easing-linear
ease: aos-easing-ease
ease-in: aos-easing-ease-in
ease-out: aos-easing-ease-out
ease-in-out: aos-easing-ease-in-out
ease-in-back: aos-easing-ease-in-back
ease-out-back: aos-easing-ease-out-back
ease-in-out-back: aos-easing-ease-in-out-back
ease-in-sine: aos-easing-ease-in-sine
ease-out-sine: aos-easing-ease-out-sine
ease-in-out-sine: aos-easing-ease-in-out-sine
ease-in-quad: aos-easing-ease-in-quad
ease-out-quad: aos-easing-ease-out-quad
ease-in-out-quad: aos-easing-ease-in-out-quad
ease-in-cubic: aos-easing-ease-in-cubic
ease-out-cubic: aos-easing-ease-out-cubic
ease-in-out-cubic: aos-easing-ease-in-out-cubic
ease-in-quart: aos-easing-ease-in-quart
ease-out-quart: aos-easing-ease-out-quart
ease-in-out-quart: aos-easing-ease-in-out-quart
Animation Duration:
100ms: aos-duration-100
200ms: aos-duration-200
300ms: aos-duration-300
400ms: aos-duration-400
500ms: aos-duration-500
600ms: aos-duration-600
700ms: aos-duration-700
800ms: aos-duration-800
900ms: aos-duration-900
1000ms: aos-duration-1000
1100ms: aos-duration-1100
1200ms: aos-duration-1200
1300ms: aos-duration-1300
1400ms: aos-duration-1400
1500ms: aos-duration-1500
1600ms: aos-duration-1600
1700ms: aos-duration-1700
1800ms: aos-duration-1800
1900ms: aos-duration-1900
2000ms: aos-duration-2000
2100ms: aos-duration-2100
2200ms: aos-duration-2200
2300ms: aos-duration-2300
2400ms: aos-duration-2400
2500ms: aos-duration-2500
2600ms: aos-duration-2600
2700ms: aos-duration-2700
2800ms: aos-duration-2800
2900ms: aos-duration-2900
3000ms: aos-duration-3000
Animation Delay: (*new, added in 1.0.2)
100ms: aos-delay-100
200ms: aos-delay-200
300ms: aos-delay-300
400ms: aos-delay-400
500ms: aos-delay-500
600ms: aos-delay-600
700ms: aos-delay-700
800ms: aos-delay-800
900ms: aos-delay-900
1000ms: aos-delay-1000
1100ms: aos-delay-1100
1200ms: aos-delay-1200
1300ms: aos-delay-1300
1400ms: aos-delay-1400
1500ms: aos-delay-1500
1600ms: aos-delay-1600
1700ms: aos-delay-1700
1800ms: aos-delay-1800
1900ms: aos-delay-1900
2000ms: aos-delay-2000
2100ms: aos-delay-2100
2200ms: aos-delay-2200
2300ms: aos-delay-2300
2400ms: aos-delay-2400
2500ms: aos-delay-2500
2600ms: aos-delay-2600
2700ms: aos-delay-2700
2800ms: aos-delay-2800
2900ms: aos-delay-2900
3000ms: aos-delay-3000
To Disable Animations On Specific Device
To disable animations on certain elements on devices larger than 767px, simply add aoswp-disable-desktop class name to the element tag
To disable animations on certain elements on devices smaller than 766px, simply add aoswp-disable-mobile class name to the element tag
To disable animations site-wide / per page basis on specific devices:
add this lines to your css files:
@media ( your media query ) {
html:not(.no-js) .aoswp-enabled [data-aos] {
opacity: 1!important;
-webkit-transform: none!important;
transform: none!important;
transition: none!important;
transition-timing-function: unset!important;
transition-duration: unset!important;
transition-property: none!important;
}
}
Note
Both AOS JavaScript and CSS will only be loaded if there is ‘aos-‘ in the page’s html. So this plugin will not add bloat to pages that do not use/need the AOS animations.
Although the AOS library is already lightweight, the CSS and JS in this plugin are delay-able, so it won’t hurt your site’s performance at all. (You can use Optimize More! to delay the CSS and JS)
Disclaimer
This plugin doesn’t add anything to your database and won’t do any permanent change to your HTML, so you can safely deactivate and delete it when you no longer need it.
USEFUL PLUGINS TO OPTIMIZE YOUR SITE’S SPEED:
Optimize More! – A DIY WordPress Page Speed Optimization Pack. Features:
Load CSS Asynchronously – selectively load CSS file(s) asynchronously on selected post/page types.
Delay CSS and JS until User Interaction – selectively delay CSS/JS load until user interaction on selected post/page types.
Preload Critical CSS, JS, and Font Files – selectively preload critical CSS/JS/Font file(s) on selected post/page types.
Remove Unused CSS and JS Files – selectively remove unused CSS/JS file(s) on selected post/page types.
Load Gutenberg CSS conditionally – Load each CSS of the core blocks will only get enqueued when the block gets rendered on a page.
Advance Defer JS – hold JavaScripts load until everything else has been loaded. Adapted from the legendary varvy’s defer js method *recommended for defer loading 3rd party scripts like ads, pixels, and trackers
Defer JS – selectively defer loading JavaScript file(s) on selected post/page types.
Remove Passive Listener Warnings – Remove the “Does not use passive listeners to improve scrolling performance” warning on Google PageSpeed Insights
Optimize More! Images – A simple yet powerfull image, iframe, and video optimization plugin (Lazy load images / iframes / videos, Preload featured images automatically). Also support lazy loading CSS background images.
Lazyload, Preload, and more! – A simplified version of Optimize More! Images. Able to do what Optimize More! Images can do but without UI for settings (you can customize the default settings using filters). This tiny little plugin (around 14kb zipped) will automatically:
lazyload your below the fold images (img tag and bg images) /iframes / videos,
preload your featured images,
and add loading=”eager” to your featured image and all images that have no-lazy or skip-lazy class.
Other USEFUL PLUGIN:
Shop Extra – A lightweight plugin to optimize your WooCommerce & Business site:
Floating WhatsApp Chat Widget (can be use without WooCommerce),
WhatsApp Order Button for WooCommrece,
Hide/Disable WooCommerce Elements,
WooCommerce Strings Translations,
and many more.
Image & Video Lightbox – A lightweight plugin that automatically adds Lightbox functionality to images displayed by WordPress (Gutenberg) Gallery and Image Blocks, as well as GenerateBlocks Image Blocks, and also videos created by the core Video Block, without the need to set the link to media file manually one by one.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Animate 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.0.7 | trunk |
延伸相關外掛（你可能也想知道）
Scrollsequence – Cinematic Scroll Image Animation Plugin 》Scrollsequence 可讓您創建令人驚嘆的圖像序列動畫，可使用滾輪或觸摸控制。只需幾個點擊，將靜態設計轉換為視覺體驗。, , , 讓您的網站活起來，讓訪問者透過...。
Brozzme Scroll Top 》Brozzme Scroll Top 是一個輕量級的外掛，可以在每個頁面上添加一個可完全自定義的滾動至頂部按鈕。當用戶滾動頁面時，按鈕就會出現，當回到頁面頂部時就會消...。
Scroll Magic Addon for Elementor 》ScrollMagic for Elementor 可以輕鬆地根據使用者的當前滾動位置進行反應。這是一款完美的外掛，如果您想製作具有美麗效果的優秀網站，它與 Elementor widget...。
Fast Smooth Scroll 》外掛總結：, - 這個外掛簡單直接，提供快速且高效的使用者體驗。, - 啟用外掛後，所有的錨點連結（指向同一頁面上其他內容的連結）將提供平滑捲動的體驗，而...。
Scroll Magic Addon for WPBakery Page Builde 》透過 ScrollMagic for WPBakery Page Builder，您可以輕鬆地根據使用者的當前捲動位置做出反應。如果您想要在網站上加入美麗的效果，這是完美的外掛。它可完...。