Jack In The Box

Reveal CSS animation as you scroll down a page. By default, you should use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.

Advantages:

Smaller than other javascript parallax plugins, like Scrollorama (they do fantastic things, but can be too much heavier for simple needs)
Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup
Fast execution and lightweight code: the browser will like it ;-)
You can change the settings - See below

Version

0.0.5

Are you smarter than us?

So far we deactivated it by default on mobile devices (see below why...). You know a solution to fix this problem? contribute or contact us!

Documentation

Dependencies

HTML

  <section class="box slideInLeft"></section>
  <section class="box slideInRight"></section>

Basic usage

$('body').jackInTheBox();

Advanced usage

$('body').jackInTheBox({
  boxClass:     'box',      // default
  animateClass: 'animated', // default
  offset:       0           // default
});

Mobile devices

By default, we won't trigger the animations on mobile devices (Android, webOS, iPhone, iPad, iPod, BlackBerry, IEMobile, Opera Mini). For more details, please read this page before raising an issue / feature request related to events not firing on mobile devices.

Bug tracker

If you find a bug, please raise it the issue here on Github!

Developer

Developed by Matthieu Aussaguel, mynameismatthieu.com

lokidg/jackInTheBox