Team:Cornell/sandbox

From 2013.igem.org

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

Revision as of 14:48, 17 July 2014

Parallax Test

Parallax Design 2

Retrieved from "http://2013.igem.org/Team:Cornell/sandbox"