jQuery Plugin For Viewport Triggered Scroll Animations - RisingSun

RisingSun is a lightweight yet robust jQuery plugin that implements awesome animations on any Html elements as they come into view.

See also:

• Awesome jQuery Plugin For Magical Scroll Interactions - ScrollMagic
• jQuery Plugin To Animate Elements When They Scroll Into View - inview
• jQuery Plugin To Animate Content As User Scrolls - scrollex
• Simple jQuery Plugin To Animate Html Elements On Scroll - jScrollability

How to use it:

1. Load the jQuery risingsun plugin after you have jQuery library installed.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/lib/jquery.risingSun.js"></script>

2. Load the jQuery easing plugin for extra easing effects.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Call the plugin on the element and setup the animations you want to trigger.

$("#ELEMENT").RisingSun({
  // OPTIONS HERE
});

4. All the default options & callback functions.

// animation speed
duration: 500,

// Animation will start after this value (ms)
timer: false, 

// starting position at Viewport(top 0.0- bottom 1.0)
startPosition: 0.5,

// starting position X(diff) for moving Animation
x: 0 

// starting position Y(diff) for moving Animation
y: 0, //

// starting scale for scaling Animation
scale: 1, //	is  [Default 1.0]

// easing options
ease: 'linear' ,

// wipe animation("TB" or "LR")
wipe: false , 

// start opacity
fadeStart: 0,

// end opacity
fadeEnd: 1, 

// Pop Up Animation ('true/false' or scaling factor)
popanime: false,

// replays animation
replay: true, 

// function called when animation is sarted
onWakeup: function(){}, 

// functioni called when animation is finished
onComplete: function(){},

// function called when replay
onReplay:  function(){} 

Change logs:

2015-02-27

• Fixed minus position

2015-01-28

• bug fixing

---

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