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

jQuery Plugin For Awesome CSS3 Transition Effects on Scroll - Space.js
File Size: 6.67 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.