"
Team:Cornell/sandbox
From 2013.igem.org
(Difference between revisions)
| Line 180: | Line 180: | ||
-webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||
height: 100%; | height: 100%; | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| Line 229: | Line 223: | ||
margin-top: 0.7%; | margin-top: 0.7%; | ||
color: rgb(70, 70, 70); | color: rgb(70, 70, 70); | ||
| + | } | ||
| + | |||
| + | div.wrapper { | ||
| + | position: relative; | ||
| + | margin: 0 10%; | ||
| + | height: 80%; | ||
| + | overflow: hidden; | ||
} | } | ||
| Line 342: | Line 343: | ||
----------------------------------------- */ | ----------------------------------------- */ | ||
.screen { | .screen { | ||
| - | |||
height: 100%; | height: 100%; | ||
border: solid 1px black; | border: solid 1px black; | ||
| Line 364: | Line 364: | ||
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> | <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> | ||
| - | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| - | + | $(document).ready(function() { | |
| - | + | // remove all empty <p> tags | |
| - | + | $("p").filter( function() { | |
| - | + | return $.trim($(this).html()) == ''; | |
| - | + | }).remove(); | |
| + | |||
| + | //width of body wrapper | ||
| + | $(window).resize(function() { | ||
| + | $("wrapper").width(document.width()-200); | ||
| + | }; | ||
| + | |||
| + | <!-- Parallax Script --> | ||
| + | $(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> | </script> | ||
</head> | </head> | ||
Revision as of 16:46, 19 July 2014
