jquery waypoint

just a test.

HTML

<script src="https://raw.github.com/imakewebthings/jquery-waypoints/master/waypoints.min.js"></script>
<div class="area-body">
    <h1>waypoints.js demo</h1>
    <div id="scene1" class="scene">
        <h1 class="title">Scene1</h1>
        <div class="anim anim1">Scene1-1 animation completed</div>
        <div class="anim anim2">Scene1-2 animation completed</div>
        <div class="anim anim3">Scene1-3 animation completed</div>
        <div class="anim anim4">Scene1-4 animation completed</div>
        <div class="anim anim5">Scene1-5 animation completed</div>
    </div>
    <div id="scene2" class="scene">
        <h1 class="title">Scene2</h1>
        <div class="anim anim1">Scene2-1 animation completed</div>
        <div class="anim anim2">Scene2-2 animation completed</div>
        <div class="anim anim3">Scene2-3 animation completed</div>
        <div class="anim anim4">Scene2-4 animation completed</div>
        <div class="anim anim5">Scene2-5 animation completed</div>
    </div>
    <div id="scene3" class="scene">
        <h1 class="title">Scene3</h1>
        <div class="anim anim1">Scene3-1 animation completed</div>
        <div class="anim anim2">Scene3-2 animation completed</div>
        <div class="anim anim3">Scene3-3 animation completed</div>
        <div class="anim anim4">Scene3-4 animation completed</div>
        <div class="anim anim5">Scene3-5 animation completed</div>
    </div>
    <div id="scene4" class="scene">
        <h1 class="title">Scene4</h1>
        <div class="anim anim1">Scene4-1 animation completed</div>
        <div class="anim anim2">Scene4-2 animation completed</div>
        <div class="anim anim3">Scene4-3 animation completed</div>
        <div class="anim anim4">Scene4-4 animation completed</div>
        <div class="anim anim5">Scene4-5 animation completed</div>
    </div>
    <div id="scene5" class="scene">
        <h1 class="title">Scene5</h1>
        <div class="anim anim1">Scene5-1 animation completed</div>
        <div...

CSS

.area-body { width: 600px; margin: 0 auto; text-align: center; }
.scene { height: 600px; }
#scene1 { background: blue; }
#scene2 { background: yellow; }
#scene3 { background: green; }
#scene4 { background: pink; }
#scene5 { background: brown; }
.title { margin: 0; line-height: 600px; }
.anim { display: none; background: white; line-height: 120px; opacity: .5; }

JavaScript

$(function(){
    
    $('#scene1').waypoint(function(){
        alert(1);
    });
    
    $('#scene2').waypoint(function(){
        var anim0 = function(){ $('#scene2 .title').fadeOut(500, anim1); };
        var anim1 = function(){ $('#scene2 .anim1').fadeIn(500, anim2); };
        var anim2 = function(){ $('#scene2 .anim2').fadeIn(500, anim3); };
        var anim3 = function(){ $('#scene2 .anim3').fadeIn(500, anim4); };
        var anim4 = function(){ $('#scene2 .anim4').fadeIn(500, anim5); };
        var anim5 = function(){ $('#scene2 .anim5').fadeIn(500); };
        anim0();
    }, { offset: '50%' });
    
    $('#scene3').waypoint(function(){
        var anim0 = function(){ $('#scene3 .title').fadeOut(500, anim1); };
        var anim1 = function(){ $('#scene3 .anim1').fadeIn(500, anim2); };
        var anim2 = function(){ $('#scene3 .anim2').fadeIn(500, anim3); };
        var anim3 = function(){ $('#scene3 .anim3').fadeIn(500, anim4); };
        var anim4 = function(){ $('#scene3 .anim4').fadeIn(500, anim5); };
        var anim5 = function(){ $('#scene3 .anim5').fadeIn(500); };
        anim0();
    }, { offset: '50%' });
    
    $('#scene4').waypoint(function(){
        var anim0 = function(){ $('#scene4 .title').fadeOut(500, anim1); };
        var anim1 = function(){ $('#scene4 .anim1').fadeIn(500, anim2); };
        var anim2 = function(){ $('#scene4 .anim2').fadeIn(500, anim3); };
        var anim3 = function(){ $('#scene4 .anim3').fadeIn(500, anim4); };
        var anim4 = function(){ $('#scene4 .anim4').fadeIn(500, anim5); };
        var anim5 = function(){ $('#scene4 .anim5').fadeIn(500); };
        anim0();
    }, { offset: '50%' });
    
    $('#scene5').waypoint(function(){
        var anim0 = function(){ $('#scene5 .title').fadeOut(500, anim1); };
        var anim1 = function(){ $('#scene5 .anim1').fadeIn(500, anim2); };
        var anim2 = function(){ $('#scene5 .anim2').fadeIn(500, anim3); };
        var anim3 = function(){ $('#scene5...