Team:Marburg/2

From 2013.igem.org

(Difference between revisions)
 
(5 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:Marburg/normalize.css}}
 
-
 
<html>
<html>
-
<!DOCTYPE html>
+
<style>
-
<html lang="en">
+
 
-
<head>
+
@font-face {
-
<meta charset="utf-8">
+
  font-family: 'Luckiest Guy';
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
  font-style: normal;
-
<title>SUPERSCROLLORAMA - Simple Demo #1</title>
+
  font-weight: 400;
 +
  src: local('Luckiest Guy'), local('LuckiestGuy-Regular'), url(http://themes.googleusercontent.com/static/fonts/luckiestguy/v4/5718gH8nDy3hFVihOpkY5HhCUOGz7vYGh680lGh-uXM.woff) format('woff');
 +
}
 +
 
 +
/*! normalize.css 2011-08-31T22:02 UTC · http://github.com/necolas/normalize.css */
 +
 
 +
/* =============================================================================
 +
  HTML5 display definitions
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Corrects block display not defined in IE6/7/8/9 & FF3
 +
*/
 +
 
 +
article,
 +
aside,
 +
details,
 +
figcaption,
 +
figure,
 +
footer,
 +
header,
 +
hgroup,
 +
nav,
 +
section {
 +
    display: block;
 +
}
 +
 
 +
/*
 +
* Corrects inline-block display not defined in IE6/7/8/9 & FF3
 +
*/
 +
 
 +
audio,
 +
canvas,
 +
video {
 +
    display: inline-block;
 +
    *display: inline;
 +
    *zoom: 1;
 +
}
 +
 
 +
/*
 +
* Prevents modern browsers from displaying 'audio' without controls
 +
*/
 +
 
 +
audio:not([controls]) {
 +
    display: none;
 +
}
 +
 
 +
/*
 +
* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 +
* Known issue: no IE6 support
 +
*/
 +
 
 +
[hidden] {
 +
    display: none;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Base
 +
  ========================================================================== */
 +
 
 +
/*
 +
* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 +
*    http://clagnut.com/blog/348/#c790
 +
* 2. Keeps page centred in all browsers regardless of content height
 +
* 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
 +
*    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 +
*/
 +
 
 +
html {
 +
    font-size: 100%; /* 1 */
 +
    overflow-y: scroll; /* 2 */
 +
    -webkit-text-size-adjust: 100%; /* 3 */
 +
    -ms-text-size-adjust: 100%; /* 3 */
 +
}
 +
 
 +
/*
 +
* Addresses margins handled incorrectly in IE6/7
 +
*/
 +
 
 +
body {
 +
    margin: 0;
 +
}
 +
 
 +
/*
 +
* Addresses font-family inconsistency between 'textarea' and other form elements.
 +
*/
 +
 
 +
body,
 +
button,
 +
input,
 +
select,
 +
textarea {
 +
    font-family: sans-serif;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Links
 +
  ========================================================================== */
 +
 
 +
a {
 +
    color: #00e;
 +
}
 +
 
 +
a:visited {
 +
    color: #551a8b;
 +
}
 +
 
 +
/*
 +
* Addresses outline displayed oddly in Chrome
 +
*/
 +
 
 +
a:focus {
 +
    outline: 0;
 +
}
 +
 
 +
/*
 +
* Improves readability when focused and also mouse hovered in all browsers
 +
* people.opera.com/patrickl/experiments/keyboard/test
 +
*/
 +
 
 +
a:hover,
 +
a:active {
 +
    outline: 0;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Typography
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Addresses styling not present in IE7/8/9, S5, Chrome
 +
*/
 +
 
 +
abbr[title] {
 +
    border-bottom: 1px dotted;
 +
}
 +
 
 +
/*
 +
* Addresses style set to 'bolder' in FF3/4, S4/5, Chrome
 +
*/
 +
 
 +
b,
 +
strong {
 +
    font-weight: bold;
 +
}
 +
 
 +
blockquote {
 +
    margin: 1em 40px;
 +
}
 +
 
 +
/*
 +
* Addresses styling not present in S5, Chrome
 +
*/
 +
 
 +
dfn {
 +
    font-style: italic;
 +
}
 +
 
 +
/*
 +
* Addresses styling not present in IE6/7/8/9
 +
*/
 +
 
 +
mark {
 +
    background: #ff0;
 +
    color: #000;
 +
}
 +
 
 +
/*
 +
* Corrects font family set oddly in IE6, S4/5, Chrome
 +
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
 +
*/
 +
 
 +
pre,
 +
code,
 +
kbd,
 +
samp {
 +
    font-family: monospace, serif;
 +
    _font-family: 'courier new', monospace;
 +
    font-size: 1em;
 +
}
 +
 
 +
/*
 +
* Improves readability of pre-formatted text in all browsers
 +
*/
 +
 
 +
pre {
 +
    white-space: pre;
 +
    white-space: pre-wrap;
 +
    word-wrap: break-word;
 +
}
 +
 
 +
/*
 +
* 1. Addresses CSS quotes not supported in IE6/7
 +
* 2. Addresses quote property not supported in S4
 +
*/
 +
 
 +
/* 1 */
 +
 
 +
q {
 +
    quotes: none;
 +
}
 +
 
 +
/* 2 */
 +
 
 +
q:before,
 +
q:after {
 +
    content: '';
 +
    content: none;
 +
}
 +
 
 +
small {
 +
    font-size: 75%;
 +
}
 +
 
 +
/*
 +
* Prevents sub and sup affecting line-height in all browsers
 +
* gist.github.com/413930
 +
*/
 +
 
 +
sub,
 +
sup {
 +
    font-size: 75%;
 +
    line-height: 0;
 +
    position: relative;
 +
    vertical-align: baseline;
 +
}
 +
 
 +
sup {
 +
    top: -0.5em;
 +
}
 +
 
 +
sub {
 +
    bottom: -0.25em;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Lists
 +
  ========================================================================== */
 +
 
 +
ul,
 +
ol {
 +
    margin: 1em 0;
 +
    padding: 0 0 0 40px;
 +
}
 +
 
 +
dd {
 +
    margin: 0 0 0 40px;
 +
}
 +
 
 +
nav ul,
 +
nav ol {
 +
    list-style: none;
 +
    list-style-image: none;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Embedded content
 +
  ========================================================================== */
 +
 
 +
/*
 +
* 1. Removes border when inside 'a' element in IE6/7/8/9, F3
 +
* 2. Improves image quality when scaled in IE7
 +
*    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 +
*/
 +
 
 +
img {
 +
    border: 0; /* 1 */
 +
    -ms-interpolation-mode: bicubic; /* 2 */
 +
}
 +
 
 +
/*
 +
* Corrects overflow displayed oddly in IE9
 +
*/
 +
 
 +
svg:not(:root) {
 +
    overflow: hidden;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Figures
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Addresses margin not present in IE6/7/8/9, S5, O11
 +
*/
 +
 
 +
figure {
 +
    margin: 0;
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Forms
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Corrects margin displayed oddly in IE6/7
 +
*/
 +
 
 +
form {
 +
    margin: 0;
 +
}
 +
 
 +
/*
 +
* Define consistent margin and padding
 +
*/
 +
 
 +
fieldset {
 +
    margin: 0 2px;
 +
    padding: 0.35em 0.625em 0.75em;
 +
}
 +
 
 +
/*
 +
* 1. Corrects color not being inherited in IE6/7/8/9
 +
* 2. Corrects alignment displayed oddly in IE6/7
 +
*/
 +
 
 +
legend {
 +
    border: 0; /* 1 */
 +
    *margin-left: -7px; /* 2 */
 +
}
 +
 
 +
/*
 +
* 1. Corrects font size not being inherited in all browsers
 +
* 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome
 +
* 3. Improves appearance and consistency in all browsers
 +
*/
 +
 
 +
button,
 +
input,
 +
select,
 +
textarea {
 +
    font-size: 100%; /* 1 */
 +
    margin: 0; /* 2 */
 +
    vertical-align: baseline; /* 3 */
 +
    *vertical-align: middle; /* 3 */
 +
}
 +
 
 +
/*
 +
* 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
 +
* 2. Corrects inner spacing displayed oddly in IE6/7
 +
*/
 +
 
 +
button,
 +
input {
 +
    line-height: normal; /* 1 */
 +
    *overflow: visible;  /* 2 */
 +
}
 +
 
 +
/*
 +
* Corrects overlap and whitespace issue for buttons and inputs in IE6/7
 +
* Known issue: reintroduces inner spacing
 +
*/
 +
 
 +
table button,
 +
table input {
 +
    *overflow: auto;
 +
}
 +
 
 +
/*
 +
* 1. Improves usability and consistency of cursor style between image-type 'input' and others
 +
* 2. Corrects inability to style clickable 'input' types in iOS
 +
*/
 +
 
 +
button,
 +
html input[type="button"],
 +
input[type="reset"],
 +
input[type="submit"] {
 +
    cursor: pointer; /* 1 */
 +
    -webkit-appearance: button; /* 2 */
 +
}
 +
 
 +
/*
 +
* 1. Addresses box sizing set to content-box in IE8/9
 +
* 2. Addresses excess padding in IE8/9
 +
*/
 +
 
 +
input[type="checkbox"],
 +
input[type="radio"] {
 +
    box-sizing: border-box; /* 1 */
 +
    padding: 0; /* 2 */
 +
}
 +
 
 +
/*
 +
* 1. Addresses appearance set to searchfield in S5, Chrome
 +
* 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
 +
*/
 +
 
 +
input[type="search"] {
 +
    -webkit-appearance: textfield; /* 1 */
 +
    -moz-box-sizing: content-box;
 +
    -webkit-box-sizing: content-box; /* 2 */
 +
    box-sizing: content-box;
 +
}
 +
 
 +
/*
 +
* Corrects inner padding displayed oddly in S5, Chrome on OSX
 +
*/
 +
 
 +
input[type="search"]::-webkit-search-decoration {
 +
    -webkit-appearance: none;
 +
}
 +
 
 +
/*
 +
* Corrects inner padding and border displayed oddly in FF3/4
 +
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 +
*/
 +
 
 +
button::-moz-focus-inner,
 +
input::-moz-focus-inner {
 +
    border: 0;
 +
    padding: 0;
 +
}
 +
 
 +
/*
 +
* 1. Removes default vertical scrollbar in IE6/7/8/9
 +
* 2. Improves readability and alignment in all browsers
 +
*/
 +
 
 +
textarea {
 +
    overflow: auto; /* 1 */
 +
    vertical-align: top; /* 2 */
 +
}
 +
 
 +
 
 +
/* =============================================================================
 +
  Tables
 +
  ========================================================================== */
 +
 
 +
/*
 +
* Remove most spacing between table cells
 +
*/
 +
 
 +
table {
 +
    border-collapse: collapse;
 +
    border-spacing: 0;
 +
}
 +
 
 +
.clearfix:before,.clearfix:after{content:" ";display:table;}
 +
.clearfix:after{clear:both;}
 +
.clearfix{zoom:1;}
 +
 
 +
/*
 +
COLORS
 +
 +
Dark Blue #222438
 +
Medium Blue #69697A
 +
Light Blue #C5C3DE
 +
Yellow #FFB000
 +
Red #D92B00
-
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
+
*/
-
<link rel="stylesheet" href="css/normalize.css" type="text/css">
+
 
-
<link rel="stylesheet" href="css/style.css" type="text/css">
+
body {
-
</head>
+
background: #222438;
-
<body class="simple-demo">
+
font-family: Georgia, Times New Roman, Times, serif;
 +
font-weight: bold;
 +
font-size: 20px;
 +
text-align: center;
 +
visibility: hidden;
 +
}
 +
 
 +
.simple-demo, .mobile-demo {
 +
visibility: visible;
 +
}
 +
 
 +
.simple-demo #content-wrapper {
 +
height: 1600px;
 +
padding-top: 400px;
 +
}
 +
 
 +
h1 {
 +
font-size: 120px;
 +
font-weight: normal;
 +
margin: 0;
 +
font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;
 +
text-transform: uppercase;
 +
color: #FFB000;
 +
text-shadow: 0 2px 1px #000;
 +
line-height: .8;
 +
}
 +
 
 +
h2 {
 +
font-size: 150px;
 +
font-weight: normal;
 +
margin: 0;
 +
color: #FFB000;
 +
padding: 60px;
 +
text-shadow: 0 2px 1px #000;
 +
font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;
 +
text-transform: uppercase !important;
 +
        text-decoration: none !important;
 +
 
 +
}
 +
h3 {
 +
font-size: 60px;
 +
font-weight: normal;
 +
margin: 0;
 +
color: #FFB000;
 +
text-shadow: 0 2px 1px #000;
 +
font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;
 +
text-transform: uppercase;
 +
}
 +
 
 +
p { width: 80%; margin: 20px auto; text-shadow: 0 2px 1px #000; color: #C5C3DE; }
 +
a, a:visited { color: #D92B00; font-weight: bold; font-style: italic; }
 +
ul { list-style: none; }
 +
 
 +
figcaption { text-shadow: 0 2px 1px #000; color: #C5C3DE; }
 +
 
 +
.download { padding: 10px; }
 +
 
 +
pre { font-size: 15px; }
 +
code { font-style: normal; }
 +
blockquote {
 +
text-align: left;
 +
width: 720px;
 +
margin: 10px auto;
 +
background: #C5C3DE;
 +
border: solid 2px #69697A;
 +
padding: 0 40px;
 +
}
 +
 
 +
#console {
 +
display: none;
 +
position: fixed;
 +
top: 0;
 +
left: 15px;
 +
width: 500px;
 +
margin: 0;
 +
font-size: 14px;
 +
font-style: italic;
 +
background-color: #69697A;
 +
text-shadow: none;
 +
text-align: left;
 +
padding: 3px 10px;
 +
border-radius: 0 0 10px 10px;
 +
z-index: 99;
 +
opacity: .8;
 +
}
 +
 
 +
#title {
 +
overflow: hidden;
 +
font-size: 180px;
 +
margin: 0 auto -580px;
 +
width: 100%;
 +
height: 1000px;
 +
position: relative;
 +
padding-top: 30px;
 +
z-index: 99;
 +
}
 +
 
 +
.title-line { position: relative; display: block; margin: auto; width: 300%; left: -100%; }
 +
#title-line2 { top: -60px; }
 +
#title-line3 { top: -120px; }
 +
.title-line span { display: inline-block; line-height: 1.1; position: relative; }
 +
.twitter-follow-button { position: relative; top: 8px; left: 4px; }
 +
#title-info { position: relative; z-index:99998; margin-top: 40px; opacity: 0; }
 +
 
 +
.credit {
 +
font-size: 20px;
 +
margin: 10px auto;
 +
text-align: center;
 +
font-style: italic;
 +
color: #D92B00;
 +
z-index:100;
 +
}
 +
 
 +
#download {
 +
position: relative;
 +
margin: 50px auto;
 +
font-size: 18px;
 +
width: 100%;
 +
line-height: 1.8;
 +
z-index: 99999;
 +
}
 +
#hire { margin-bottom: 80px; }
 +
 
 +
#download a { color: #69697A; }
 +
 
 +
#examples-1 { overflow: hidden; }
 +
#fly-it { position: relative; }
 +
#scale-it { width: 500%; margin: 0px -200%; padding: 0; }
 +
 
 +
#examples-pin { position: relative; width: 100%; height: 600px; overflow: hidden; margin-bottom: -200px; }
 +
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
 +
.pin-frame h2 { margin-top: 120px; }
 +
#pin-frame-slide { background: #D92B00; margin-left:-100%; }
 +
#pin-frame-wipe  { background: #FFB000; top:100%; }
 +
#pin-frame-wipe h2  { color: #D92B00; }
 +
#pin-frame-bounce  { background: #222438; }
 +
#pin-frame-color  { background: #222438; }
 +
#pin-frame-unpin  { top:100%; }
 +
 
 +
#examples-2 { z-index: 9999; width: 100%; height: 100%; overflow: hidden; }
 +
#fling-it, #move-it { position: relative; }
 +
#examples-parallax {
 +
padding-top: 200px;
 +
height: 800px;
 +
margin-bottom: -600px;
 +
overflow: hidden;
 +
}
 +
#parallax-it {
 +
padding: 0;
 +
font-size: 80px;
 +
position: relative;
 +
}
 +
 
 +
#parallax-it-left {
 +
position: relative;
 +
font-size: 120px;
 +
left: -160px;
 +
color: #C5C3DE;
 +
opacity: 0.5;
 +
-moz-opacity: 0.5;
 +
filter:alpha(opacity=5);
 +
overflow: hidden;
 +
}
 +
 
 +
#parallax-it-right {
 +
position: relative;
 +
font-size: 160px;
 +
left: 80px;
 +
color: #C5C3DE;
 +
opacity: 0.25;
 +
-moz-opacity: 0.25;
 +
filter:alpha(opacity=2.5);
 +
overflow: hidden;
 +
width: 900px;
 +
}
 +
 
 +
#showcase { padding: 60px 0; }
 +
.gallery { width: 960px; margin: 0 auto; text-align: center; }
 +
.gallery figure { text-align: center; float: left; margin: 10px; height: 270px; display: inline-block; }
 +
 
 +
#howtouse { padding-top: 200px; }
 +
 
 +
.divider { font-size: 14px; padding-top: 20px; }
 +
 
 +
.disclaimer {
 +
font-size: 18px;
 +
font-style: italic;
 +
font-weight: normal;
 +
margin: 0 auto;
 +
}
 +
 
 +
#instructions { padding-top: 40px; }
 +
 
 +
#instructions p { margin: 0px auto 20px; }
 +
 
 +
#instructions-animation { padding-top: 40px; }
 +
 
 +
#instructions .documentation {
 +
font-size: 16px;
 +
text-align: left;
 +
width: 720px;
 +
margin: 10px auto 30px;
 +
padding: 20px 40px;
 +
text-shadow: none;
 +
border: solid 1px #69697A;
 +
color:#C5C3DE;
 +
}
 +
 
 +
#instructions .param-list {
 +
font-size: 18px;
 +
line-height: 1.4;
 +
padding: 0 18px;
 +
margin: 1em 0 0;
 +
}
 +
 
 +
#instructions .param-list-sub {
 +
padding-left: 36px;
 +
font-size: 15px;
 +
}
 +
 
 +
#instructions .param-list li {
 +
font-weight: normal;
 +
padding-bottom: 20px;
 +
text-shadow: 0 2px 1px #000;
 +
}
 +
.param {
 +
font-style:italic;
 +
}
 +
 
 +
.param-list small {
 +
display: block;
 +
font-weight: normal;
 +
font-style: italic;
 +
}
 +
 
 +
#credits { padding: 80px 0; }
 +
 
 +
/* mobile demo */
 +
 
 +
.mobile-demo #fade-it {
 +
margin: 400px 0 500px 0;
 +
}
 +
.mobile-demo #examples-1 {
 +
margin-bottom: 200px;
 +
}
 +
.mobile-demo #instructions {
 +
width: 800px;
 +
text-align: left;
 +
margin: auto;
 +
}
 +
.mobile-demo ul {
 +
list-style: disc;
 +
color:#FFFFFF;
 +
margin: 20px 80px 100px 80px;
 +
}
 +
.mobile-demo #content-wrapper {
 +
margin-bottom: 100px;
 +
width: 100%;
 +
}
 +
.mobile-demo h2 {
 +
width: 90%;
 +
}
 +
.mobile-demo h3 {
 +
color:#C5C3DE;
 +
}
 +
 
 +
#newversion {
 +
position: absolute;
 +
top: 230px;
 +
left: 50%;
 +
margin-left: 250px;
 +
z-index: 100;
 +
background-color: #D92B00;
 +
width: 200px;
 +
height: 200px;
 +
border-radius: 100px;
 +
box-shadow: 0 2px 1px #000;
 +
}
 +
#newversion h2 {
 +
font-size: 43px;
 +
margin: 0;
 +
padding: 30px 0px 0px 0px;
 +
color: #FFFFFF;
 +
font-style: normal;
 +
}
 +
#newversion a {
 +
text-decoration: none;
 +
padding: 0px 20px 20px 20px;
 +
display: block;
 +
font-size: 18px;
 +
color: #FFFFFF;
 +
}
 +
#newversion a:hover span {
 +
text-decoration: underline;
 +
}
 +
 
 +
 
 +
 
 +
</style>
 +
<div class="simple-demo">
<div id="content-wrapper">
<div id="content-wrapper">
Line 25: Line 777:
</div>
</div>
-
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
+
<script type="text/javascript" src="https://2013.igem.org/Team:Marburg/scroll.js?action=raw"></script>
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+
-
  <script>window.jQuery || document.write('<script src="_/js/jquery-1.9.1.min.js"><\/script>')</script>
+
-
  <script src="js/jquery.superscrollorama.js"></script>
+
-
<script>
+
-
$(document).ready(function() {
+
-
var controller = $.superscrollorama();
+
-
// individual element tween examples
+
-
controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
+
-
controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}));
+
-
controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}));
+
-
controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}));
+
-
controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), 0, 100); // 100 px offset for better timing
+
-
});
+
-
</script>
+
-
</body></html>
+
</div></html>
-
</html>
+

Latest revision as of 11:10, 9 March 2014

Fade It

Fly It

Spin It

Scale It

Smush It

Retrieved from "http://2013.igem.org/Team:Marburg/2"