Animation Tryout App

there are three buttons: * Parken * News and * Back

by Alex

HTML

<link rel="stylesheet" href="https://rawgit.com/daneden/animate.css/master/animate.css">
<div id="screen1" class="activity"></div>
<div id="screen2" class="activity off"></div>
<div id="screen3" class="activity off"></div>
<div id="phone"></div>
<!-- menu -->
<div id="park"></div>
<div id="news"></div>
<div id="ad"></div>
<div id="reset"></div>

<div id="selector">
    Transition In:<br/>
    <select class="input" id="animation-in">
        <optgroup label="Attention Seekers">
          <option value="bounce">bounce</option>
          <option value="flash">flash</option>
          <option value="pulse">pulse</option>
          <option value="rubberBand">rubberBand</option>
          <option value="shake">shake</option>
          <option value="swing">swing</option>
          <option value="tada">tada</option>
          <option value="wobble">wobble</option>
        </optgroup>

        <optgroup label="Bouncing Entrances">
          <option value="bounceIn">bounceIn</option>
          <option value="bounceInDown">bounceInDown</option>
          <option value="bounceInLeft">bounceInLeft</option>
          <option value="bounceInRight">bounceInRight</option>
          <option value="bounceInUp">bounceInUp</option>
        </optgroup>

        <optgroup label="Bouncing Exits">
          <option value="bounceOut">bounceOut</option>
          <option value="bounceOutDown">bounceOutDown</option>
          <option value="bounceOutLeft">bounceOutLeft</option>
          <option value="bounceOutRight">bounceOutRight</option>
          <option value="bounceOutUp">bounceOutUp</option>
        </optgroup>

        <optgroup label="Fading Entrances">
          <option value="fadeIn">fadeIn</option>
          <option value="fadeInDown">fadeInDown</option>
          <option value="fadeInDownBig">fadeInDownBig</option>
          <option value="fadeInLeft">fadeInLeft</option>
          <option value="fadeInLeftBig">fadeInLeftBig</option>
          <option...

CSS

body{
    font-family: Helvetica, sans;
    font-size:11px;
}
div{
    position:absolute;
    top:0px; left:0px;
}
#phone{
    width:1300px; height:1024px;
    background-image:url(http://f.cl.ly/items/0n0H323G2y2E1L3W0T2e/Desktop.png);
    z-index:999;
}
.activity{
    width:338px; height:598px;
    background-size:100%;
    margin-left:344px; margin-top:214px;    
}
.off{
    margin-left:9688px;
}
.on{
    z-index:1000;
}
#screen1{
    background-image:url(http://f.cl.ly/items/2V1A0p3U0E3l2N222W0n/home.png);
    z-index:990;
}
#screen2{
    background-image:url(http://f.cl.ly/items/2z2N3u1b400b0g2d062G/map.png);
    z-index:991;
}
#screen3{
    background-image:url(http://f.cl.ly/items/0W0q3O0v1t2D0F0K111T/news.png);
    z-index:992;
}
#selector{
    z-index:100200;
    margin:10px;
}
#park{
    width:80px;
    height:80px;
    background-color:transparent;
    
    z-index:1100;
    margin-left:510px;
    margin-top:720px;
}
#news{
    width:360px;
    height:90px;
    background-color:transparent;
    
    z-index:1101;
    margin-left:340px;
    margin-top:620px;
}
#ad{
    width:180px;
    height:80px;
    background-color:transparent;
    
    z-index:1102;
    margin-left:330px;
    margin-top:720px;
}
#reset{
    width:180px;
    height:80px;
    background-color:transparent;
    
    z-index:1104;
    margin-left:330px;
    margin-top:220px;
}

JavaScript

$('#animation-in').val('bounceInRight');
$('#animation-out').val('slideOutUp');

window.app = {
    click: function(target){
        console.log('go to', target);
        $('#'+target)
            .removeClass('off')
            .addClass('animated '+$('#animation-in').val());
    },
    close: function(){
        $('#screen2')
            .addClass('animated '+$('#animation-out').val());
        $('#screen3')
            .addClass('animated '+$('#animation-out').val());
        
        $('#screen2').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', app.reset);
        //$('#screen3').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

    },
    reset:function(){
         $('#screen2')
            .removeClass()
            .addClass('activity off');   
         $('#screen3')
            .removeClass()
            .addClass('activity off');   
    }
};

$('#park').click( function(){
    app.click('screen2');
});
$('#news').click( function(){
    app.click('screen3');
});
$('#ad').click( function(){
    app.click('screen3');
});
$('#reset').click( app.close );