Created
June 2, 2014 20:03
-
-
Save JayHoltslander/ac0f6b598113f8a404f3 to your computer and use it in GitHub Desktop.
Animated List Items in Bootstrap 3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Animated List Items in Bootstrap</title> | |
| <!-- Bootstrap --> | |
| <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> | |
| <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | |
| <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| <!-- Custom Reset ul and li for animated li styling in Bootstrap --> | |
| <style type="text/css"> | |
| ul[data-liffect="zoomOut"] { | |
| -webkit-margin-before: 0; | |
| -webkit-margin-after: 0; | |
| -webkit-margin-start: 0px; | |
| -webkit-margin-end: 0px; | |
| -webkit-padding-start: 0px; | |
| -moz-margin-before: 0; | |
| -moz-margin-after: 0; | |
| -moz-margin-start: 0px; | |
| -moz-margin-end: 0px; | |
| -moz-padding-start: 0px; | |
| list-style: none; | |
| } | |
| ul[data-liffect="zoomOut"] li { | |
| /* Butt everything up together (Optional - Comment out if you wish) */ | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| /* If not butting everything up, add some padding above and below to match the left and right padding from Bootstrap */ | |
| /* padding-top:15px;padding-bottom:15px; */ | |
| } | |
| </style> | |
| <!-- End of ul li reset stuff --> | |
| <!-- Actual Liffect generated css - http://ademilter.com/lab/liffect/ --> | |
| <style> | |
| ul[data-liffect="zoomOut"] li { | |
| opacity: 0; | |
| position: relative; | |
| -webkit-animation: zoomOut 300ms ease both; | |
| -webkit-animation-play-state: paused; | |
| -moz-animation: zoomOut 300ms ease both; | |
| -moz-animation-play-state: paused; | |
| -o-animation: zoomOut 300ms ease both; | |
| -o-animation-play-state: paused; | |
| animation: zoomOut 300ms ease both; | |
| animation-play-state: paused; | |
| } | |
| ul[data-liffect="zoomOut"].play li { | |
| -webkit-animation-play-state: running; | |
| -moz-animation-play-state: running; | |
| -o-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| @-webkit-keyframes zoomOut { | |
| 0% { opacity: 0; -webkit-transform: scale(.6); } | |
| 100% { opacity: 1; -webkit-transform: scale(1); } | |
| } | |
| @-moz-keyframes zoomOut { | |
| 0% { opacity: 0; -moz-transform: scale(.6); } | |
| 100% { opacity: 1; -moz-transform: scale(1); } | |
| } | |
| @-o-keyframes zoomOut { | |
| 0% { opacity: 0; -o-transform: scale(.6); } | |
| 100% { opacity: 1; -o-transform: scale(1); } | |
| } | |
| @keyframes zoomOut { | |
| 0% { opacity: 0; transform: scale(.6); } | |
| 100% { opacity: 1; transform: scale(1); } | |
| } | |
| </style> | |
| <!-- Extra hover effect on any images in animated lists (Optional) --> | |
| <style> | |
| ul[data-liffect="zoomOut"] img:hover { | |
| opacity:0.6; | |
| filter:alpha(opacity=60); /* For IE8 and earlier */ | |
| -webkit-transition:opacity .2s ease-in; | |
| -moz-transition:opacity .2s ease-in; | |
| -o-transition:opacity .2s ease-in; | |
| transition:opacity .2s ease-in; | |
| } | |
| </style> | |
| </head> | |
| <body style="background-color:#000;"> | |
| <div class="jumbotron" style="margin-bottom: 0px;"> | |
| <h1>Demo <small>Animated list items in Bootstrap 3</small></h1> | |
| <p class="lead">A simple demo of the animated <li> effect built with Adem ilter's generator at: <a href="http://ademilter.com/lab/liffect/">http://ademilter.com/lab/liffect</a> but mixed with Bootstrap's grid and responsive images class.</p> | |
| <p class="lead">Try resizing your browser window and refreshing.</p> | |
| <a class="btn btn-lg btn-info" value="Reload Page" onClick="document.location.reload(true)"><i class="fa fa-refresh"></i> Refresh page</a> | |
| </div> | |
| <!-- <div class="container"> --> <!-- Container is optional --> | |
| <ul data-liffect="zoomOut"> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/CB0D0F/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/E9E6E1/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/D3CDC5/65625A&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/65625A/fff&text=<img>+in+an+<li>"></a></li> | |
| <li class="col-lg-1 col-md-2 col-sm-3 col-xs-6"><a href="#"><img class="img-responsive" src="http://placehold.it/512/940000/fff&text=<img>+in+an+<li>"></a></li> | |
| </ul> | |
| <!-- </div> --> <!-- /container that was optional --> | |
| <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
| <!-- Boostrap's JavaScript --> | |
| <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> | |
| <!-- The JavaScript generated by liffect - http://ademilter.com/lab/liffect/ --> | |
| <script type="text/javascript"> | |
| $(document).ready(function () { | |
| $("ul[data-liffect] li").each(function (i) { | |
| $(this).attr("style", "-webkit-animation-delay:" + i * 100 + "ms;" | |
| + "-moz-animation-delay:" + i * 100 + "ms;" | |
| + "-o-animation-delay:" + i * 100 + "ms;" | |
| + "animation-delay:" + i * 100 + "ms;"); | |
| if (i == $("ul[data-liffect] li").size() -1) { | |
| $("ul[data-liffect]").addClass("play") | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
lsadlalsn