http://2013.igem.org/wiki/index.php?title=Team:Cornell/sandbox/design2&feed=atom&action=history
Team:Cornell/sandbox/design2 - Revision history
2024-03-28T09:10:34Z
Revision history for this page on the wiki
MediaWiki 1.16.5
http://2013.igem.org/wiki/index.php?title=Team:Cornell/sandbox/design2&diff=363879&oldid=prev
N.Bhatt: Created page with "<html> <head> <!-- Inspired by http://hotdot.pro/en/# --> <title> Parallax Test </title> <meta name="Description" content="2014 Parallax Down" /> <meta name="Keywords" c..."
2014-07-16T15:41:19Z
<p>Created page with "<html> <head> <!-- Inspired by http://hotdot.pro/en/# --> <title> Parallax Test </title> <meta name="Description" content="2014 Parallax Down" /> <meta name="Keywords" c..."</p>
<p><b>New page</b></p><div><html><br />
<head><br />
<!-- Inspired by http://hotdot.pro/en/# --><br />
<title> Parallax Test </title><br />
<meta name="Description" content="2014 Parallax Down" /><br />
<meta name="Keywords" content="hi this is going to be awesome" /><br />
<br />
<style type="text/css"><br />
/* -----------------------------------------<br />
Table of Contents<br />
----------------------------------------- <br />
:: iGEM Reset<br />
:: Basic Styles<br />
:: Parallax<br />
*/<br />
<br />
/* -----------------------------------------<br />
iGEM Reset<br />
----------------------------------------- */<br />
#globalWrapper {<br />
background-color: transparent;<br />
border: none;<br />
margin: 0;<br />
padding: 0;<br />
width: 100%;<br />
height: 100%;<br />
}<br />
#content {<br />
background-color: transparent;<br />
border: none;<br />
padding: 0;<br />
margin: 0;<br />
width: 100%;<br />
overflow: visible;<br />
height: 100%;<br />
line-height: inherit;<br />
color: white;<br />
}<br />
#bodyContent {<br />
border: none;<br />
padding: 0px;<br />
margin: 0px;<br />
width: 100%;<br />
height: 100%;<br />
}<br />
#top-section {<br />
height: 15px;<br />
margin: 0px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 0 !important;<br />
padding: 0;<br />
border: none;<br />
font-size: 10px;<br />
}<br />
#p-logo {<br />
height: 1px;<br />
overflow: hidden;<br />
display: none;<br />
}<br />
#search-controls {<br />
overflow: hidden;<br />
display: block;<br />
background: none;<br />
position: absolute;<br />
top: 100px;<br />
right: 40px;<br />
}<br />
#menubar.left-menu {<br />
/* margin-top: -80px; uncomment this when page goes live */<br />
background: none;<br />
height: 20px;<br />
left: 20px;<br />
float: left;<br />
}<br />
.left-menu ul {<br />
visibility: hidden;<br />
}<br />
.left-menu:hover ul {<br />
visibility: visible;<br />
}<br />
.left-menu:hover ul li a {<br />
color: #666;<br />
}<br />
.left-menu li a:hover {<br />
color: #aaaaff !important;<br />
text-decoration: underline;<br />
}<br />
#menubar.right-menu {<br />
display: block;<br />
width: 300px;<br />
float: left;<br />
margin-top: 2px;<br />
margin-right: 0px;<br />
border: none;<br />
}<br />
.right-menu ul {<br />
width: 300px;<br />
margin: 0px;<br />
visibility: hidden;<br />
}<br />
.right-menu ul li a {<br />
background: none;<br />
color: #666;<br />
}<br />
.right-menu:hover ul {<br />
visibility: visible;<br />
}<br />
#footer-box {<br />
width: 100%;<br />
margin: -10px auto 0 auto;<br />
padding: 20px 0;<br />
display: none; /* uncomment when page goes live */<br />
}<br />
.visualClear {<br />
display: none;<br />
}<br />
#footer {<br />
border: none;<br />
width: 965px;<br />
margin: 0 auto;<br />
padding: 0;<br />
}<br />
.firstHeading {<br />
display: none;<br />
}<br />
#f-list a {<br />
color: #333;<br />
font-size: 10px;<br />
}<br />
#f-list a:hover {<br />
color: #666;<br />
}<br />
.printfooter {<br />
display: none;<br />
}<br />
#footer ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
#footer ul li {<br />
margin-top: 0;<br />
margin-bottom: 0;<br />
margin-left: 10px;<br />
margin-right: 10px;<br />
padding: 0;<br />
}<br />
#search-controls {<br />
display: none;<br />
}<br />
h3#siteSub {<br />
display: none;<br />
}<br />
#contentSub {<br />
display: none;<br />
}<br />
p:first-child {<br />
display: none;<br />
}<br />
#catlinks {<br />
display: none;<br />
}<br />
#footer-box {<br />
width: 977px;<br />
margin-bottom: 20px;<br />
}<br />
<br />
/* -----------------------------------------<br />
Basic Styles<br />
----------------------------------------- */<br />
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }<br />
<br />
html { font-size: 62.5%; height: 100%;}<br />
<br />
body {<br />
background: #f2f2f2;<br />
font-family: Helvetica, sans-serif;<br />
font-size: 15px;<br />
line-height: 23px;<br />
-webkit-font-smoothing: antialiased;<br />
background-image: url("http://hotdot.pro/static/img/bck.png");<br />
height: 100%;<br />
overflow: hidden;<br />
}<br />
<br />
div.wrapper {<br />
//margin: 0 204px;<br />
height: 100%;<br />
}<br />
<br />
#navbar {<br />
position: fixed;<br />
z-index: 10;<br />
width: 100%;<br />
text-align: center;<br />
font-size: 13px;<br />
bottom: -1px;<br />
}<br />
<br />
h1, h2, h3, h4, h5, h6 {<br />
font-family: Helvetica, serif;<br />
font-weight: normal;<br />
border-bottom: none;<br />
margin-bottom: 0px !important; <br />
color: white;<br />
}<br />
<br />
h1 { font-size: 44px; }<br />
h2 { font-size: 37px; }<br />
h3 { font-size: 27px; }<br />
h4 { font-size: 23px; }<br />
h5 { font-size: 17px; }<br />
h6 { font-size: 14px; }<br />
<br />
h1.centered, h2.centered, h3.centered, h4.centered, h5.centered, h6.centered {<br />
text-align: center;<br />
}<br />
<br />
a, a:visited {<br />
color: #b31b1b;<br />
text-decoration: none;<br />
}<br />
<br />
a:hover {<br />
color: #871414;<br />
text-decoration: none;<br />
}<br />
<br />
/* Lists */<br />
ul, ol { <br />
font-size: 14px; <br />
line-height: 1.6; <br />
margin-bottom: 17px; <br />
list-style-position: inside; <br />
}<br />
<br />
ul li ul, ul li ol { margin-left: 20px; margin-bottom: 0; }<br />
ul.square, ul.circle, ul.disc { margin-left: 17px; }<br />
ul.square { list-style-type: square; }<br />
ul.square li ul { list-style: inherit; }<br />
ul.circle { list-style-type: circle; }<br />
ul.circle li ul { list-style: inherit; }<br />
ul.disc { list-style-type: disc; }<br />
ul.disc li ul { list-style: inherit; }<br />
ul.no-bullet {<br />
list-style: none;<br />
}<br />
#navbar ul.no-bullet { <br />
list-style: none; <br />
font-size: 12px;<br />
font-weight: bold;<br />
}<br />
#navbar ul.no-bullet li {<br />
float: left;<br />
margin-right: 10%;<br />
padding-left: 1%;<br />
padding-right: 1%;<br />
padding-top: 1%;<br />
}<br />
#navbar ul.no-bullet li.right {<br />
color: #b31b1b;<br />
float: right;<br />
margin-right: 0.3%<br />
}<br />
#navbar ul.large li { line-height: 21px; }<br />
<br />
ol li ul, ol li ol { margin-left: 20px; margin-bottom: 0; }<br />
<br />
<br />
/* Misc */<br />
.left { float: left; }<br />
.right { float: right; }<br />
.text-left { text-align: left; }<br />
.text-right { text-align: right; }<br />
.text-center { text-align: center; }<br />
.hide { display: none; }<br />
.highlight { background: #ffff99; }<br />
.absolute { position: absolute; }<br />
<br />
#googlemap img, object, embed { max-width: none; }<br />
#map_canvas embed { max-width: none; }<br />
#map_canvas img { max-width: none; }<br />
#map_canvas object { max-width: none; }<br />
<br />
.nohilite {<br />
-webkit-touch-callout: none;<br />
-webkit-user-select: none;<br />
-khtml-user-select: none;<br />
-moz-user-select: none;<br />
-ms-user-select: none;<br />
user-select: none;<br />
}<br />
div.clearfix {<br />
content: ".";<br />
display: block;<br />
clear: both;<br />
visibility: hidden;<br />
line-height: 0;<br />
height: 0;<br />
}<br />
.off-canvas {<br />
width: 100%;<br />
}<br />
<br />
/* -----------------------------------------<br />
Parallax<br />
----------------------------------------- */ <br />
.screen {<br />
position: relative;<br />
height: 100%;<br />
}<br />
.parallax { <br />
position: absolute;<br />
white-space: nowrap;<br />
};<br />
.layer1 { z-index: 4; }<br />
.layer2 { z-index: 3; }<br />
.layer3 { z-index: 2; }<br />
.layer4 { z-index: 1; }<br />
<br />
</style><br />
<!-- Fixes IE browser older than IE9--><br />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><br />
<br />
<!-- JQuery Library --><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script><br />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script><br />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><br />
<br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
// remove all empty <p> tags<br />
$("p").filter( function() {<br />
return $.trim($(this).html()) == '';<br />
}).remove();<br />
<br />
$(document).keydown(function(e){<br />
//down or right<br />
if (e.which == 40 || e.which == 39) { <br />
if(parseInt($("#second-last-screen").css('left')) > -1) //only scroll if we haven't reached the far right<br />
scroll($(".parallax, .screen"), 0);<br />
<br />
return false; //prevent more keydown events from firing<br />
}<br />
<br />
//up or left<br />
else if(e.which == 38 || e.which == 37) {<br />
if(parseInt($("#first-screen").css('left')) < 0) //only scroll if we haven't reached the far left<br />
scroll($(".parallax, .screen"), 1);<br />
<br />
return false; //prevent more keydown events from firing<br />
}<br />
});<br />
<br />
});<br />
<br />
function scroll(param, dir) {<br />
$(param).each(function() {<br />
var speed = parseInt($(this).data('speed'), 10); //in milliseconds<br />
var dist = parseInt($(this).data('dist'), 10); //in percentages<br />
<br />
// dir = 0 scroll right, dir = 1 scroll left<br />
if(dir == 0) $(this).animate( { left: '-=' + dist + '%'}, 1000); <br />
else $(this).animate( { left: '+=' + dist + '%'}, 1000, 'easeOutBounce'); <br />
});<br />
}<br />
</script><br />
</head><br />
<br />
<body><br />
<!-- navigation --><br />
<div id="navbar"><br />
<img class="left" src ="https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png" style="margin-top: -32px; margin-right: 35px;"><br />
<ul class="no-bullet"><br />
<li> Project </li><br />
<li> Outreach </li><br />
<li> Notebook </li><br />
<li> Team </li><br />
<li class="right"> Twitter </li><br />
<li class="right"> Facebook </li><br />
</ul><br />
</div><br />
<br />
<!-- content --><br />
<div class="wrapper"><br />
<header><br />
<h1> Parallax Design 1.2 </h1><br />
</header><br />
<br />
<!-- NOTE: first-screen and second-last-screen have to be manually set if layout is changed --><br />
<!-- Screen 1 --><br />
<div id="first-screen" class="screen" data-speed="500" data-dist="100"><br />
<div class="parallax" data-speed="1000" data-dist="200" style="left: 22%; top: 10%"><br />
<h4> Inspired by this site ---> </h4><br />
</div><br />
<div class="parallax" data-speed="1000" data-dist="0" style="left: 40%; top: 10%"><br />
<a href="http://hotdot.pro/en/#" target="_blank"> <h1 style="color: #871414"> http://hotdot.pro/en/# </h1> </a><br />
</div><br />
<div class="parallax" data-speed="1000" data-dist="500" style="left: 24%; top: 20%"><br />
<h6>(Yeah I stole the background) </h6><br />
</div><br />
<div class="parallax" data-speed="1000" data-dist="0" style="left: 58%; top: 50%"><br />
<h2> Use the arrow keys to navigate --> </h2><br />
</div><br />
</div><br />
<!-- Screen 2 --><br />
<div id="second-last-screen" class="screen" data-speed="500" data-dist="100" style="top: -100%; left: 100%"><br />
<div class="parallax" data-speed="2000" data-dist="10" style="left: 30%; top: 25%;"><br />
<h2> These pages can replace sliders </h2><br />
</div><br />
<div class="parallax" data-speed="2000" data-dist="100" style="left: 40%; top: 35%;"><br />
<h4> And have pretty pictures that link to project pages </h2><br />
</div><br />
<div class="parallax" data-speed="2000" data-dist="50" style="left: 34%; top: 45%;"><br />
<h5> This means design will be really important </h2><br />
</div><br />
<div class="parallax" data-speed="2000" data-dist="0" style="left: 34%; top: 65%;"><br />
<h5> It also takes a ton of time to set the page up cause I have to position everything manually </h2><br />
</div><br />
</div><br />
<!-- Screen 3 --><br />
<div class="screen" data-speed="500" data-dist="100" style="top: -200%; left: 200%"><br />
<div class="parallax" data-speed="1000" data-dist="0" style="left: 10%;"><br />
<h6> Whee! </h6><br />
</div><br />
<div class="parallax" data-speed="1000" data-dist="0" style="left: 50%; top: 50%"><br />
<h2> Yay! Parallax </h2><br />
</div><br />
<div class="parallax" data-speed="1000" data-dist="0" style="left: 60%; top: 60%"><br />
<h2> (Nupur's awesome) </h2><br />
</div><br />
</div><br />
</div><br />
</body><br />
</html></div>
N.Bhatt