jQuery Plugin For Awesome CSS3 Transition Effects on Scroll - Space.js

Space.js is a jQuery plugin that enables you to implement CSS3 powered enter/exit animations on the Html elements as your scroll up/down the page.

Transition Effects included:

• scaleIn
• fadeIn
• scaleOut
• fadeOut
• rotateQuarterRight
• rotateInQuarterClockwise
• zoomOut
• slideInBottom
• slideOutDown
• slideOutLeft
• slideOutRight
• slideInRight
• slideOutUp
• slideInTop
• slideInLeft
• slideBottomRight
• rotate360
• rotate3dOut

Basic usage:

1. Load the latest version of jQuery library and the jQuery Space.js plugin in your project.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>

2. The markup structure. Wrap your Html elements & objects into the space-frame container and config the enter/exit animations using Html5 data-* attributes.

<div class="space-frame" 
     data-enter="rotateInQuarterClockwise fadeIn" 
     data-exit="fadeOut scaleOut"
     data-duration="1.3">
  <section class="space-inner-frame">
    <p>Content goes here</p>
  </section>
</div>

3. The default transitions.

scaleIn: {'scale':{from:0, to:1}},
fadeIn: {'opacity':{from:0, to:1}},
scaleOut: {'scale':{from:1, to:1.5}},
fadeOut: {'opacity':{from:1, to:0}},
rotateQuarterRight: {'rotate':{from:0, to:90}},
rotateInQuarterClockwise: {'rotate':{from:-90, to:0}},
zoomOut:{
  'scale': {from: 1, to: 0}
},
slideInBottom: {
  'translate3d':{
    from:{y:700},
    to: {y:0}
  }
},
slideOutDown: {
  'translate3d':{
    from:{y:0},
    to: {y:700}
  }
},
slideOutLeft: {
  'translate3d':{
    from:{x:0},
    to: {x:-700}
  }
},
slideOutRight: {
  'translate3d':{
    from:{x:0},
    to: {x:700}
  }
},
slideInRight: {
  'translate3d':{
    from:{x:700},
    to: {x:0}
  }
},
slideOutUp: {
  'translate3d':{
    from:{y:0},
    to: {y:-700}
  }
},
slideInTop: {
  'translate3d':{
    from:{y:-700},
    to: {y:0}
  }
},
slideInLeft: {
  'translate3d':{
    from:{x:-700},
    to: {x:0}
  }
},
slideBottomRight: {
  'translate3d':{
    from:{x:0, y:0},
    to: {x:500, y:500}
  }
},
rotate360: {
  'rotate':{from:0, to:360}
},
rotate3dOut: {
  'rotate3d':{
    from:{x:0, y:0, z:0, angle:0},
    to: {x:1, y:-1,z:0, angle:90}
  }
}

4. Create your own transition effects in the JavaScript.

var transitions = {
    rotate720: {
      'rotate':{from:0, to:720}
    },
    fadeOutHalf: {
      'opacity':{from:1, to:0.5}
    }
};
Space.addTransitions(transitions);

---

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