Animate On Scrolling Effect Build With Pure JavaScript


Effect element with CSS – effect-js is an easy-to-use Animate On Scroll library that applies CSS3-enabled animations (such as zoom, flip, slide, and fade) to any element while they enter the viewport.

animate content on scroll, on scroll animation javascript, trigger css animation on scroll, css animation based on scroll position, css animations on scroll slide in from left

All Animation Name

  • 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 make use of it:

1. Import the stylesheet effect-js.min.css and JavaScript effect-js.min.js into the web 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 component utilizing 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>

Configurable Animate On Scroll, Effect Item with CSS Plugin/Github, animate div on scroll jquery, page scroll animation css

See Demo And Download

Official Website(stacksagar): Click Here

This superior jQuery/javascript plugin is developed by stacksagar. For extra Advanced Usage, please go to the official website.