Reanimate On Scroll

外掛說明

Simple and easy to use plugin which allows reanimation on each time the element is scrolled past (up or down)

What Problem Does It Solve

It means you don’t have to formulate any fancy way to reanimate animations each time a user scrolls the page. Animate.it is super useful but it’s ability to reanimate on scroll is fairly limited (espeically in WP) and pretty lackluster, the other animation triggers work really well, such as Click and Hover.

Alterntivley, you can call any other type of animation scrips that use this style of inserting animations into the DOM.

Even better, you can just use the raw JavaScript file in any project that uses the dom

Pre-Requiesites

Animate It! for WordPress
jQuery

How It Works

This script continuously monitors the top of the screen and the view port height (bottom of the screen). When an element is about to leave the screen, the animationName in disappear-<animationName> get’s applied to the tag, invoking the animation. When the element returns back into the screen, the animationName get’s removed, invoking the original animation applied in the class attribute.

How To Use It

WordPress Usage

Page -> Settings -> Block -> Advanced -> additonal CSS Class(es)

scroller disappear-fadeOut animated fadeIn duration1 delay1

HTML Usage

<div class="scroller disappear-fadeOut animated fadeIn duration1 delay1" />

Basically, use your animation as normal, just apply the additional class names into the class and it will work fine.

使用者評論

There are no reviews for this plugin.

參與者及開發者

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

將 Reanimate On Scroll 外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

1.0.0

  • Initial Release