jquery scenemanager

just a test.

by FiNGAHOLiC

HTML

<script src="https://raw.github.com/FiNGAHOLiC/jquery.scenemanager/master/js/jquery.scenemanager.js"></script>
<div class="area-body">
    <h1>jquery.scenemanager.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>
...

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(){
    
    // create scenes instance
    var scenes = $.scenemanager();
    
    // add scene
    scenes.add({
        sceneSelector: '#scene1',
        sceneObject: {
            $title: '.title',
            $anim1: '.anim1',
            $anim2: '.anim2',
            $anim3: '.anim3',
            $anim4: '.anim4',
            $anim5: '.anim5'
        },
        sceneFn: function($scene, elems, $queue){
            var anim0 = function(){ elems.$title.fadeOut(500, anim1); };
            var anim1 = function(){ elems.$anim1.fadeIn(500, anim2); };
            var anim2 = function(){ elems.$anim2.fadeIn(500, anim3); };
            var anim3 = function(){ elems.$anim3.fadeIn(500, anim4); };
            var anim4 = function(){ elems.$anim4.fadeIn(500, anim5); };
            var anim5 = function(){
                elems.$anim5.fadeIn(500, function(){
                    $queue.dequeue();
                });
            };
            anim0();
        }
    });
    
    // add scene
    scenes.add({
        sceneSelector: '#scene2',
        sceneObject: {
            $title: '.title',
            $anim1: '.anim1',
            $anim2: '.anim2',
            $anim3: '.anim3',
            $anim4: '.anim4',
            $anim5: '.anim5'
        },
        sceneFn: function($scene, elems, $queue){
            var anim0 = function(){ elems.$title.fadeOut(500, anim1); };
            var anim1 = function(){ elems.$anim1.fadeIn(500, anim2); };
            var anim2 = function(){ elems.$anim2.fadeIn(500, anim3); };
            var anim3 = function(){ elems.$anim3.fadeIn(500, anim4); };
            var anim4 = function(){ elems.$anim4.fadeIn(500, anim5); };
            var anim5 = function(){
                elems.$anim5.fadeIn(500, function(){
                    $queue.dequeue();
                });
            };
            anim0();
        }
    });
    
    // add scene
    scenes.add({
        sceneSelector: '#scene3',
        sceneObject: {
            $title:...