This is a jQuery plugin that can start some kind of animation
when entering the viewport
version 1.0

written by Kiyoshi Honda

download

How to use

.RisingSun can add the opening animation for the finished HTML coding/layout.

1. Create your HTML as usual
2. When the layout is finished, set the Rising Sun by the following (3-5) procedure.
3. Load 'risingSun.js' after jQury and jQuery easing.(This plugIn needs 'jQuery easing.')
4. The basic usage is $('element').RisingSun([otion]);
5. You can set some parameter to [option]. Check the reference.

Please bear in mind that scale of animation must be 'position:absolute';

Sample Animation

$("#fadein").RisingSun({duration:300});
$("#scalein").RisingSun({duration:500,scale:0.1,ease:"easeInCubic"});
$("#movein").RisingSun({duration:800,x:50,y50,ease:"easeOutCubic"});
$("#popin").RisingSun({
     duration:300,scale:0.1,popanime:true,ease:"easeOutCubic",replay:true
});
$("#wipein").RisingSun({
     duration:1200,wipe:"LR",ease:"easeInOutCubic"
});
$("#slidein").RisingSun({
     duration:1200,slide:"LR",ease:"easeInOutCubic",startPosition:0.6
});
$("#rotatein").RisingSun({
     duration:800,rotate:360,scale:0.1,ease:"easeInCubic",
});

Timer and Callback

$("#timer").RisingSun({
     timer:1500,duration:300,scale:0.1,popanime:true,startPosition:0.7,ease:"easeOutCubic"
     onComplete:function(){
          $("#callback1").RisingSun({timer:0,duration:300,scale:0.1,popanime:true,ease:"easeOutCubic"});
          $("#callback2").RisingSun({timer:100,duration:300,scale:0.1,popanime:true,ease:"easeOutCubic"});
          $("#callback3").RisingSun({timer:200,duration:300,scale:0.1,popanime:true,ease:"easeOutCubic"});
     }
});

Options

duration: is animation speed [Default 500]
timer: is set Timer.Animation will start after this value(ms) [Default false]
startPosition: is starting position at Viewport(top 0.0- bottom 1.0) [Default 0.5]
x:is starting position X(diff) for moving Animation [Default 0]
y: is starting position Y(diff) for moving Animation [Default 0]
rotate: is starting axis (diff) for rotation Animation [Default 0]
scale: is starting scale for scaling Animation [Default 1.0]
ease: takes an ease method [Default 'linear']
wipe: is wipe animation("LR","RL","TB","BT") [Default false] note: can't exist together with 'slide'
slide: is slide animation("LR","RL","TB","BT") [Default false] note: can't exist together with 'wipe'
fadeStart: start opacity [Default 0]
fadeEnd: end opacity [Default 1.0]
popanime: Pop Up Animation ('true/false' or scaling factor)[Default false]
replay: replays animation unless “false” is input [Default true]
onWakeup: function is called when animation is sarted
onComplete: functioni s called when animation is finished
onReplay: function is called when replay