Add/Remove Classes When Scolling Pass An Element - ScrollPunch

The jQuery ScrollPunch keeps track of the scroll events and adds/removes a specific CSS classe(.animate) when an element is scrolled into or out of view.

The typical usage of the plugin is to animate an element when it becomes visible in the viewport.

How to use it:

1. Create a reset element which will be used to reset the animation (Required).

<div class="resetEl">
  Reset element
</div>

2. Create an element you want to animate.

<img src="1.jpg" class="demo">

3. Initialize the jQuery ScrollPunch plugin and done.

• trigger: element to animate
• reset: element to reset the animation
• offset: offset in pixels

// scrollPunch(trigger,reset,offset)
scrollPunch('.demo','.head','200');

4. Create your own CSS3 animations in the CSS.

.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

---

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