內容簡介
使用熱門的 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.
