jQuery Plugin for Scroll-Activated CSS3 Animations - scrollEffect.js

File Size: 6.76 KB
Views Total: 607
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin for Scroll-Activated CSS3 Animations - scrollEffect.js

Yet another jQuery Animate On Scroll plugin to help create an immersive scrolling experience for your visitors.

The scroll_effect jQuery plugin automatically adds smooth, CSS3 powered, scroll-triggered animations to elements as they enter the viewport. You have full control over the animations including:

  • Duration and delay to stagger animation start times
  • Iteration count to determine if animations repeat 
  • Fill mode for controlling animation behavior before and after it plays
  • Create your own animations using CSS3 @keyframes

How to use it:

1. To get started, load the default.css (2 predefined scroll animations) and jquery.scrollEffect.js files in the document.

<link rel="stylesheet" href="/path/to/default.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.scrollEffect.js"></script>

2. Add the CSS class scroll_effect to the target elements.

<div class="scroll_effect">

3. Config the scroll-triggered animation using the following HTML data attributes:

  • data-scroll-effect-animation-name: CSS class for scroll animation
  • data-scroll-effect-animation-duration: duration of the animation
  • data-scroll-effect-animation-iteration-count: the number of times the scroll animation should be played before stopping
  • data-scroll-effect-animation-fill-mode: how the scroll animation applies styles to its target before and after its execution: none, forwards, backwards, both.
  • data-scroll-effect-animation-delay: time to wait before triggering the animation

4. Initialize the plugin.

  // options here

5. You can also config the scroll animation by passing the options to the scrollEffect function durating init.

  elementTarget: '.scroll_effect',
  defaultAnimationName: '', 
  defaultAnimationDuration: '1s', 
  defaultAnimationIterationCount: '1',
  defaultAnimationFillMode: 'forwards', 
  defaultAnimationDelay: '0'

6. Create your own scroll animations using CSS3 @keyframes.

/* jello animation from animate.css */
@keyframes jello {
  to {
    transform: translate3d(0, 0, 0);

  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);

  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);

  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);

  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);

  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);

  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);

  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);

This awesome jQuery plugin is developed by KonishiMasayoshi. For more Advanced Usages, please check the demo page or visit the official website.