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">
  ...
</div>

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

<div 
  class="scroll_effect"
  data-scroll-effect-animation-name="animation_bounce"
  data-scroll-effect-animation-duration="1s"
  data-scroll-effect-animation-iteration-count="1"
  data-scroll-effect-animation-fill-mode="forwards"
  data-scroll-effect-animation-delay="0">
  ...
</div>

4. Initialize the plugin.

$('.scroll_effect').scrollEffect({
  // options here
});

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

$('.scroll_effect').scrollEffect({
  elementTarget: '.scroll_effect',
  defaultAnimationName: '', 
  defaultAnimationDuration: '1s', 
  defaultAnimationIterationCount: '1',
  defaultAnimationFillMode: 'forwards', 
  defaultAnimationDelay: '0'
});

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

<div 
  class="scroll_effect"
  data-scroll-effect-animation-name="jello">
  ...
</div>

/* jello animation from animate.css */
@keyframes jello {
  from,
  11.1%,
  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.