"
Team:Cornell/sandbox
From 2013.igem.org
(Difference between revisions)
| Line 215: | Line 215: | ||
} | } | ||
| - | .nav:hover > img{ | + | .nav:hover > img{ |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
transform: scale(1, 1.5); | transform: scale(1, 1.5); | ||
-ms-transform: scale(1.5, 1.5); /* IE 9 */ | -ms-transform: scale(1.5, 1.5); /* IE 9 */ | ||
| Line 228: | Line 222: | ||
-moz-transform: scale(1.5, 1.5); /* Firefox */ | -moz-transform: scale(1.5, 1.5); /* Firefox */ | ||
} | } | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
.nav span{ | .nav span{ | ||
| Line 246: | Line 235: | ||
margin: 0 2%; | margin: 0 2%; | ||
overflow: hidden; | overflow: hidden; | ||
| + | } | ||
| + | |||
| + | //for spin animation | ||
| + | @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } | ||
| + | @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } | ||
| + | @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } | ||
| + | |||
| + | .spin:hover { | ||
| + | -webkit-animation:spin 0.5s linear; | ||
| + | -moz-animation:spin 0.5s linear; | ||
| + | animation:spin 0.5s linear; | ||
} | } | ||
| Line 449: | Line 449: | ||
<div id="first-screen" class="screen" data-speed="500" data-dist="100"> | <div id="first-screen" class="screen" data-speed="500" data-dist="100"> | ||
<span class="layer1" style="font-size:60px; top: 20%; left: 20%;">Parallax 2</span> | <span class="layer1" style="font-size:60px; top: 20%; left: 20%;">Parallax 2</span> | ||
| - | <img class="layer4" src="http://www.iconarchive.com/download/i74335/visualpharm/icons8-metro-style/Very-Basic-Settings.ico" style="left: 57%; height: 90%; width: 30%;"> | + | <img class="layer4 spin" src="http://www.iconarchive.com/download/i74335/visualpharm/icons8-metro-style/Very-Basic-Settings.ico" style="left: 57%; height: 90%; width: 30%;"> |
<span class="layer1" style="left:20%; top: 45%">Use arrow keys to move through slider -></span> | <span class="layer1" style="left:20%; top: 45%">Use arrow keys to move through slider -></span> | ||
<span class="layer1" style="left:20%; top: 55%">I'll get mouse controls working in a bit</span> | <span class="layer1" style="left:20%; top: 55%">I'll get mouse controls working in a bit</span> | ||
Revision as of 15:00, 25 July 2014
Parallax 2
Use arrow keys to move through slider ->
I'll get mouse controls working in a bit
There's no parallax effect right now... It's giving me some trouble
Also all the colors and images are temporary ->
General page layout coming soon
...and the hprac page that I keep forgetting to work on
