Team:Cornell/sandbox

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
{{:Team:Cornell/templates/header}}
-
<head>
+
<html>
-
<title> Home Page </title>
+
-
<meta name="Description" content="2014 Parallax Down" />
+
-
<meta name="Keywords" content="hi this is going to be awesome" />
+
-
 
+
-
<!--Style Sheet -->
+
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Cornell/sandbox/style?action=raw&ctype=text/css">
+
-
+
-
<!-- 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>
+
-
 
+
-
<!-- Custom Scripts-->
+
-
<script type="text/javascript">
+
-
  $(document).ready(function() {
+
-
// remove all empty <p> tags
+
-
      $("p").filter( function() {
+
-
          return $.trim($(this).html()) == '';
+
-
}).remove();
+
-
+
-
//width of body wrapper
+
-
$(".wrapper").height($(document).height()-200);
+
-
+
-
$(window).resize(function() {
+
-
$(".wrapper").height($(document).height()-200);
+
-
});
+
-
+
-
//parallax
+
-
$(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, 'easeOutCirc');
+
-
else $(this).animate( { left: '+=' + dist + '%'}, 1000, 'easeOutCirc');
+
-
});
+
-
}
+
-
</script>
+
-
</head>
+
-
+
<body>
<body>
<div class="navbar" style="position: relative; z-index: 20; margin-top: -29px; font-weight: 600;">
<div class="navbar" style="position: relative; z-index: 20; margin-top: -29px; font-weight: 600;">
Line 77: Line 13:
<div class="wrapper">
<div class="wrapper">
<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%;">Home Page</span>
<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%;">
<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>

Revision as of 17:26, 26 July 2014

Cornell University Genetically Engineered Machines

Project
Outreach
Notebook
Team
Home Page 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
Nickel
Mercury
Lead
Reporters

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