2014-01-21 02:31:50 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > Animate.css< / title >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "initial-scale=1, minimal-ui" / >
< link rel = "dns-prefetch" href = "//fonts.googleapis.com" / >
< link rel = "dns-prefetch" href = "//code.jquery.com" / >
< link href = '//fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700' rel = 'stylesheet' type = 'text/css' >
< link rel = "stylesheet" href = "animate.css" / >
< link rel = "stylesheet" href = "style.css" / >
< / head >
< body class = "animated fadeInDown" >
< header class = "site__header island" >
< div class = "wrap" >
< span id = "animationSandbox" style = "display: block;" > < h1 class = "site__title mega" > Animate.css< / h1 > < / span >
< span class = "beta subhead" > Just-add-water CSS animations< / span >
< / div >
< / header > <!-- /.site__header -->
< main class = "site__content island" role = "content" >
< div class = "wrap" >
< p >
< select class = "input input--dropdown js--animations" >
< optgroup label = "Attention Seekers" >
< option value = "bounce" > bounce< / option >
< option value = "flash" > flash< / option >
< option value = "pulse" > pulse< / 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 value = "fadeInRight" > fadeInRight< / option >
< option value = "fadeInRightBig" > fadeInRightBig< / option >
< option value = "fadeInUp" > fadeInUp< / option >
< option value = "fadeInUpBig" > fadeInUpBig< / option >
< / optgroup >
< optgroup label = "Fading Exits" >
< option value = "fadeOut" > fadeOut< / option >
< option value = "fadeOutDown" > fadeOutDown< / option >
< option value = "fadeOutDownBig" > fadeOutDownBig< / option >
< option value = "fadeOutLeft" > fadeOutLeft< / option >
< option value = "fadeOutLeftBig" > fadeOutLeftBig< / option >
< option value = "fadeOutRight" > fadeOutRight< / option >
< option value = "fadeOutRightBig" > fadeOutRightBig< / option >
< option value = "fadeOutUp" > fadeOutUp< / option >
< option value = "fadeOutUpBig" > fadeOutUpBig< / option >
< / optgroup >
< optgroup label = "Flippers" >
< option value = "flip" > flip< / option >
< option value = "flipInX" > flipInX< / option >
< option value = "flipInY" > flipInY< / option >
< option value = "flipOutX" > flipOutX< / option >
< option value = "flipOutY" > flipOutY< / option >
< / optgroup >
< optgroup label = "Lightspeed" >
2014-01-22 00:54:45 +01:00
< option value = "lightSpeedIn" > lightSpeedIn< / option >
< option value = "lightSpeedOut" > lightSpeedOut< / option >
2014-01-21 02:31:50 +01:00
< / optgroup >
< optgroup label = "Rotating Entrances" >
< option value = "rotateIn" > rotateIn< / option >
< option value = "rotateInDownLeft" > rotateInDownLeft< / option >
< option value = "rotateInDownRight" > rotateInDownRight< / option >
< option value = "rotateInUpLeft" > rotateInUpLeft< / option >
< option value = "rotateInUpRight" > rotateInUpRight< / option >
< / optgroup >
< optgroup label = "Rotating Exits" >
< option value = "rotateOut" > rotateOut< / option >
< option value = "rotateOutDownLeft" > rotateOutDownLeft< / option >
< option value = "rotateOutDownRight" > rotateOutDownRight< / option >
< option value = "rotateOutUpLeft" > rotateOutUpLeft< / option >
< option value = "rotateOutUpRight" > rotateOutUpRight< / option >
< / optgroup >
< optgroup label = "Sliders" >
< option value = "slideInDown" > slideInDown< / option >
< option value = "slideInLeft" > slideInLeft< / option >
< option value = "slideInRight" > slideInRight< / option >
< option value = "slideOutLeft" > slideOutLeft< / option >
< option value = "slideOutRight" > slideOutRight< / option >
< option value = "slideOutUp" > slideOutUp< / option >
< / optgroup >
< optgroup label = "Specials" >
< option value = "hinge" > hinge< / option >
< option value = "rollIn" > rollIn< / option >
< option value = "rollOut" > rollOut< / option >
< / optgroup >
< / select >
< button class = "butt js--triggerAnimation" > Animate it< / button >
< / p >
< hr / >
< p class = "meta" > < a href = "https://raw.github.com/daneden/animate.css/master/animate.css" download = "animate.css" > Download Animate.css< / a > or < a href = "//github.com/daneden/animate.css" > View on GitHub< / a > < / p >
< p > < small > Want to thank < a href = "//daneden.me" > me< / a > for this? < a href = "mailto:dan.eden@me.com?cc=cash@square.com&subject=%242.99&body=Thanks%20for%20building%20Animate.css%21%20Have%20a%20coffee%20on%20me." > Buy me a coffee< / a > .< / small > < / p >
< / div >
< / main > <!-- /.site__content -->
< script src = "//code.jquery.com/jquery-1.10.2.min.js" > < / script >
< script >
function testAnim(x) {
$('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd', function(){
$(this).removeClass();
});
};
$(document).ready(function(){
$('.js--triggerAnimation').click(function(){
var anim = $('.js--animations').val();
testAnim(anim);
});
2014-01-29 17:42:30 +01:00
$('.js--animations').change(function(){
var anim = $(this).val();
testAnim(anim);
});
2014-01-21 02:31:50 +01:00
});
< / script >
< / body >
2014-01-22 00:53:51 +01:00
< / html >