Configurable Animate On Scroll JavaScript Library – effect-js

Preview:

Description:

effect-js is an easy-to-use Animate On Scroll JavaScript library that applies 27+ CSS3-powered animations (such as zoom, flip, slide, fade) to any elements while they’re entering the viewport.

Animations Included:

• fade
• fade-up
• fade-down
• fade-left
• fade-right
• fade-up-right
• fade-up-left
• fade-down-right
• fade-down-left
• flip-up
• flip-down
• flip-left
• flip-right
• slide-up
• slide-down
• slide-left
• slide-right
• zoom-in
• zoom-in-up
• zoom-in-down
• zoom-in-left
• zoom-in-right
• zoom-out
• zoom-out-up
• zoom-out-down
• zoom-out-left
• zoom-out-right

How to use it:

1. Import the stylesheet effect-js.min.css and JavaScript effect-js.min.js into the page.

<link rel="stylesheet" href="dist/effect-js.min.css" />
<script src="dist/effect-js.min.js"></script>

2. Apply a scroll-triggered animation to your element using the data-effectJs attribute:

<div class="demo" data-effectJs="fade">fade</div>
<div class="demo" data-effectJs="fade-up">fade-up</div>
<div class="demo" data-effectJs="fade-down">fade-down</div>
<div class="demo" data-effectJs="fade-left">fade-left</div>
<div class="demo" data-effectJs="fade-right">fade-right</div>
<div class="demo" data-effectJs="fade-up-right">fade-up-right</div>
<div class="demo" data-effectJs="fade-up-left">fade-up-left</div>
<div class="demo" data-effectJs="fade-down-right">fade-down-right</div>
<div class="demo" data-effectJs="fade-down-left">fade-down-left</div>
...

3. Specify the duration of the animation.

// duration: 3000
<div class="3000 demo" data-effectJs="fade">fade</div>
// duration: 1500
<div class="1500 demo" data-effectJs="fade-up">fade-up</div>