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: 100px;
 
font-size: 13px;
font-size: 13px;
bottom: -1px;
bottom: -1px;
Line 205: Line 205:
#navbar div.nav {
#navbar div.nav {
-
display: inline-block;
+
display: table-cell;
 +
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:46, 17 July 2014

Parallax Test

Parallax Design 1.2

Inspired by this site --->

http://hotdot.pro/en/#

(Yeah I stole the background)

Use the arrow keys to navigate -->

These pages can replace sliders

And have pretty pictures that link to project pages

This means design will be really important
It also takes a ton of time to set the page up cause I have to position everything manually
Whee!

Yay! Parallax

(Nupur's awesome)

}

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; }


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>

<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>


<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

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>

<header>

Parallax Design 2

</header>

</body>

</html>

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