"
Team:NCTU Formosa/source/header-team
From 2013.igem.org
(Difference between revisions)
| Line 27: | Line 27: | ||
height: 30px; | height: 30px; | ||
line-height: 30px; | line-height: 30px; | ||
| + | } | ||
| + | /* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */ | ||
| + | .js-masonry { | ||
| + | -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="http://masonry.desandro.com/masonry.pkgd.min.js"></script> | <script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script> | ||
| + | |||
| + | <script> | ||
| + | new AnimOnScroll( document.getElementById( 'membersnadvisers' ), { | ||
| + | minDuration : 0.4, | ||
| + | maxDuration : 0.7, | ||
| + | viewportFactor : 0.2 | ||
| + | } ); | ||
| + | </script> | ||
Revision as of 13:47, 31 August 2013
