Title: Animate on Scroll
Author: Arya Dhiratara
Published: <strong>2023 年 2 月 14 日</strong>
Last modified: 2024 年 4 月 8 日

---

搜尋外掛

![](https://ps.w.org/animate-on-scroll/assets/banner-772x250.png?rev=2865401)

這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個
外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。

![](https://ps.w.org/animate-on-scroll/assets/icon-256x256.png?rev=2864924)

# Animate on Scroll

 由 [Arya Dhiratara](https://profiles.wordpress.org/aryadhiratara/) 開發

[下載](https://downloads.wordpress.org/plugin/animate-on-scroll.1.0.7.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/animate-on-scroll/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/animate-on-scroll/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/animate-on-scroll/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/animate-on-scroll/#developers)

 [技術支援](https://wordpress.org/support/plugin/animate-on-scroll/)

## 外掛說明

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](https://twitter.com/michalsnik)**
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](https://michalsnik.github.io/aos/)** and **[documentation](https://github.com/michalsnik/aos)**.

### 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` ](https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488)){
 *     ```
           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!](https://wordpress.org/plugins/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!](https://wordpress.org/plugins/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](https://wordpress.org/plugins/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!](https://wordpress.org/plugins/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](https://wordpress.org/plugins/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](https://wordpress.org/plugins/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.

 

## 安裝方式

#### From within WordPress

 1. Visit **Plugins > Add New**
 2. Search for **Animate on Scroll** or **Arya Dhiratara**
 3. Activate Animate on Scroll from your Plugins page

#### Manually

 1. Download the plugin using the download link in this WordPress plugins repository
 2. Upload **animate-on-scroll** folder to your **/wp-content/plugins/** directory
 3. Activate Animate on Scroll plugin from your Plugins page

## 常見問題集

### Why AOS?

AOS library has so many built in animations and the JavaScript is written in pure
JS without any dependencies.

### Where is the Settings Page?

This plugin doesn’t has any settings page, since the animation executions are based
from your element class.

### Does it works with any Page Builders?

Yes, as long as your builder has input fields for adding custom class names.

### How to add the Animation?

Simply add the desired AOS animation to your element class name with “aos-” prefix.
Please read the plugin description.

### Is it customizable?

Yes, the customizations are available using filter and class names. Please read 
the plugin description.

## 使用者評論

![](https://secure.gravatar.com/avatar/2d95c4c5c77f6f1861d1eeea6c7eb6010d840674eb94e3d9c20d04d4e9d7e09d?
s=60&d=retro&r=g)

### 󠀁[Really good](https://wordpress.org/support/topic/really-good-572/)󠁿

 [xguimera](https://profiles.wordpress.org/xguimera/) 2026 年 2 月 23 日

easy, light, compatible and nice!!

![](https://secure.gravatar.com/avatar/ed32f7879f2aa62464aa227904bdde79a4fe57af6c6d5a6d9f7a67e8a24fe811?
s=60&d=retro&r=g)

### 󠀁[Nice plugin!](https://wordpress.org/support/topic/nice-plugin-5020/)󠁿

 [sw38](https://profiles.wordpress.org/swd38/) 2023 年 10 月 4 日

Please keep update new feature. This plugin also work with Flatsome theme. Really
good!

![](https://secure.gravatar.com/avatar/119d8a7a876d1290502d3896b175e71f28b5cd5a9b50fcc5418678ef1dae87f5?
s=60&d=retro&r=g)

### 󠀁[Perfect! Simple, light and effective](https://wordpress.org/support/topic/perfect-simple-light-and-effective/)󠁿

 [Marc Lafay](https://profiles.wordpress.org/marc-lafay/) 2023 年 9 月 6 日

Very lightweight plugin that provides a library of classes to add to the admin.

![](https://secure.gravatar.com/avatar/b7c4779672890a8436994ff6d7de044620b83774a38be2e386e1c6f751794463?
s=60&d=retro&r=g)

### 󠀁[Very nice](https://wordpress.org/support/topic/very-nice-1901/)󠁿

 [Dieter Geiling](https://profiles.wordpress.org/dieter93/) 2023 年 9 月 5 日

Really cool plugin and also really lightweight compared to others. Recommendation
🙂 Thanks for porting AOS to WordPress!

![](https://secure.gravatar.com/avatar/6f94041026fbfea16c17574d9256364aecc060d3cb515d2feb8d1d353eb3fec6?
s=60&d=retro&r=g)

### 󠀁[Not working with Block Editor (or poor documentation))](https://wordpress.org/support/topic/not-working-with-block-editor-or-poor-documentation/)󠁿

 [leiftime](https://profiles.wordpress.org/leiftime/) 2023 年 8 月 29 日 3 則留言

Please add to the documentation how to use it with the new website editor. Thanks
a lot. Adding the aos attribute to additional css doesnt work.

![](https://secure.gravatar.com/avatar/22ef8fe5a4881095f45c3414ea08355f80a1ade1b6aeb26faaba7ff1caa57817?
s=60&d=retro&r=g)

### 󠀁[Works like a charm](https://wordpress.org/support/topic/works-like-a-charm-2200/)󠁿

 [Beef Supreme](https://profiles.wordpress.org/polymathy/) 2023 年 4 月 18 日 1 
則留言

Plain and simple AOS porting to WordPress. Works like a charm so far 👍

 [ 閱讀全部 6 則使用者評論 ](https://wordpress.org/support/plugin/animate-on-scroll/reviews/)

## 參與者及開發者

以下人員參與了開源軟體〈Animate on Scroll〉的開發相關工作。

參與者

 *   [ Arya Dhiratara ](https://profiles.wordpress.org/aryadhiratara/)
 *   [ Think Digital Agency ](https://profiles.wordpress.org/thinkdigitalway/)

〈Animate on Scroll〉外掛目前已有 1 個本地化語言版本。 感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/animate-on-scroll/contributors)
為這個外掛做出的貢獻。

[將〈Animate on Scroll〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/animate-on-scroll)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/animate-on-scroll/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/animate-on-scroll/)，或透過 
[RSS](https://plugins.trac.wordpress.org/log/animate-on-scroll/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/animate-on-scroll/)。

## 變更記錄

#### 1.0.7

 * Fix error in PHP 8.2 (thanks to @goodluckov for reporting this)
 * Update compatibility with WP 6.5

#### 1.0.6

 * Fix conflict with the built-in query loop block (thanks to @weiko for reporting
   this)

#### 1.0.5

 * Add css to disable the animations on mobile and/or desktop devices. Simply add`
   aoswp-disable-desktop` class name to disable the animation on device larger than
   767px, or add `aoswp-disable-mobile` class name to disable the animation on device
   smaller than 766px. (as asked by @mikemastrox)

#### 1.0.4

 * Fix php warning on function that responsible to enqueued the assets conditionally(
   thanks again @clipb!)

#### 1.0.3

 * Add missing pattern for ‘fade-left’ animation (thanks to @clipb for reporting
   this)
 * Refactor the code to get better compatibility for Elementor

#### 1.0.2

 * Add animation delay function to the plugin (accommodating Kevin Mccourt’s feedback
   on the GeneratePress Facebook Group)

#### 1.0.1

 * Fix plugin banner

#### 1.0.0

 * Initial release

## 中繼資料

 *  版本 **1.0.7**
 *  最後更新 **3 年前**
 *  啟用安裝數 **4,000+**
 *  WordPress 版本需求 ** 5.8 或更新版本 **
 *  已測試相容的 WordPress 版本 **6.5.13**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/animate-on-scroll/) 及 [French (France)](https://fr.wordpress.org/plugins/animate-on-scroll/).
 *  [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/animate-on-scroll)
 * 標籤:
 * [animate](https://tw.wordpress.org/plugins/tags/animate/)[animation](https://tw.wordpress.org/plugins/tags/animation/)
   [aos](https://tw.wordpress.org/plugins/tags/aos/)[scroll](https://tw.wordpress.org/plugins/tags/scroll/)
   [scroll animation](https://tw.wordpress.org/plugins/tags/scroll-animation/)
 *  [進階檢視](https://tw.wordpress.org/plugins/animate-on-scroll/advanced/)

## 評分

 4.3 星，滿分為 5 星

 *  [  5 個 5 星使用者評論     ](https://wordpress.org/support/plugin/animate-on-scroll/reviews/?filter=5)
 *  [  0 個 4 星使用者評論     ](https://wordpress.org/support/plugin/animate-on-scroll/reviews/?filter=4)
 *  [  0 個 3 星使用者評論     ](https://wordpress.org/support/plugin/animate-on-scroll/reviews/?filter=3)
 *  [  0 個 2 星使用者評論     ](https://wordpress.org/support/plugin/animate-on-scroll/reviews/?filter=2)
 *  [  1 個 1 星使用者評論     ](https://wordpress.org/support/plugin/animate-on-scroll/reviews/?filter=1)

[撰寫評分](https://wordpress.org/support/plugin/animate-on-scroll/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/animate-on-scroll/reviews/)

## 參與者

 *   [ Arya Dhiratara ](https://profiles.wordpress.org/aryadhiratara/)
 *   [ Think Digital Agency ](https://profiles.wordpress.org/thinkdigitalway/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/animate-on-scroll/)