|
|
| Line 59: |
Line 59: |
| | border: 2px #228B22 solid; | | border: 2px #228B22 solid; |
| | } | | } |
| - | /* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
| + | .toclevel-3 { |
| - | .js-masonry {
| + | display:none; |
| - | -webkit-perspective: 1300px;
| + | |
| - | -moz-perspective: 1300px;
| + | |
| - | perspective: 1300px;
| + | |
| - | }
| + | |
| - | | + | |
| - | .js-masonry .li.animate {
| + | |
| - | -webkit-transform-style: preserve-3d;
| + | |
| - | -moz-transform-style: preserve-3d;
| + | |
| - | transform-style: preserve-3d;
| + | |
| - | -webkit-transform-origin: 0% 0%;
| + | |
| - | -moz-transform-origin: 0% 0%;
| + | |
| - | transform-origin: 0% 0%;
| + | |
| - | -webkit-transform: rotateX(-80deg);
| + | |
| - | -moz-transform: rotateX(-80deg);
| + | |
| - | transform: rotateX(-80deg);
| + | |
| - | -webkit-animation: flip .8s ease-in-out forwards;
| + | |
| - | -moz-animation: flip .8s ease-in-out forwards;
| + | |
| - | animation: flip .8s ease-in-out forwards;
| + | |
| - | }
| + | |
| - | | + | |
| - | @-webkit-keyframes flip {
| + | |
| - | 100% { -webkit-transform: rotateX(0deg); opacity: 1; }
| + | |
| - | }
| + | |
| - | | + | |
| - | @-moz-keyframes flip {
| + | |
| - | 100% { -moz-transform: rotateX(0deg); opacity: 1; }
| + | |
| - | }
| + | |
| - | | + | |
| - | @keyframes flip {
| + | |
| - | 100% { transform: rotateX(0deg); opacity: 1; }
| + | |
| | } | | } |
| | </style> | | </style> |
| - | <script src="https://2013.igem.org/Team:Team:NCTU_Formosa/js/masonry.pkgd?action=raw&ctype=text/javascript"></script>
| |
| | <script src="https://2013.igem.org/Team:Team:NCTU_Formosa/js/imagesloaded?action=raw&ctype=text/javascript"></script> | | <script src="https://2013.igem.org/Team:Team:NCTU_Formosa/js/imagesloaded?action=raw&ctype=text/javascript"></script> |
| - | <script>
| |
| - | window.onload = function()
| |
| - | {
| |
| - | var $container = $('#membersnadvisers');
| |
| - | $container.imagesLoaded( function() {
| |
| - | $container.masonry();
| |
| - | });
| |
| - | };
| |
| - | </script>
| |
"
