"
Team:SYSU-Software/notebook
From 2013.igem.org
(Difference between revisions)
| (8 intermediate revisions not shown) | |||
| Line 11: | Line 11: | ||
<link href="https://2013.igem.org/Team:SYSU-Software/notebook.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" /> | <link href="https://2013.igem.org/Team:SYSU-Software/notebook.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" /> | ||
<link href="https://2013.igem.org/Team:SYSU-Software/header.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" /> | <link href="https://2013.igem.org/Team:SYSU-Software/header.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" /> | ||
| + | <link href="https://2013.igem.org/Team:SYSU-Software/footer.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" /> | ||
<script src="https://2013.igem.org/Team:SYSU-Software/jquery-1.9.1.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | <script src="https://2013.igem.org/Team:SYSU-Software/jquery-1.9.1.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
| + | <script src="https://2013.igem.org/Team:SYSU-Software/jquery.scrollorama.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
| + | |||
<script src="https://2013.igem.org/Team:SYSU-Software/bootstrap.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | <script src="https://2013.igem.org/Team:SYSU-Software/bootstrap.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
<script src="https://2013.igem.org/Team:SYSU-Software/prefix.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | <script src="https://2013.igem.org/Team:SYSU-Software/prefix.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
| + | <script src="https://2013.igem.org/Team:SYSU-Software/jquery.smooth-scroll.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
| + | |||
| + | <script> | ||
| + | $(document).ready(function() { | ||
| + | $('ul.slideNav a').smoothScroll(); | ||
| + | |||
| + | $('span.subnav a').click(function(event) { | ||
| + | event.preventDefault(); | ||
| + | var link = this; | ||
| + | $.smoothScroll({ | ||
| + | scrollTarget: link.hash | ||
| + | }); | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | </head> | ||
<body> | <body> | ||
| Line 22: | Line 41: | ||
<!-- notebook content part--> | <!-- notebook content part--> | ||
| + | <div class="wrapper"> | ||
<div id="notebook-container" > | <div id="notebook-container" > | ||
<div class="scrollblock" id="intro"> | <div class="scrollblock" id="intro"> | ||
<div id="file-folder"> | <div id="file-folder"> | ||
| - | <img id="file-folder-image" src=" | + | <img id="file-folder-image" src="https://static.igem.org/mediawiki/2013/d/d7/File-folder.png"> |
</div> | </div> | ||
<div id="time-list"> | <div id="time-list"> | ||
| - | <ul id="nav1"> | + | <ul id="nav1" class="slideNav"> |
<li> | <li> | ||
| - | <a href="#" class="left-first">4th Apr.</a> | + | <a href="#date1" class="left-first">4th Apr.</a> |
</li> | </li> | ||
<li> | <li> | ||
| - | <a href="#" class="left-second">6th Jun.</a> | + | <a href="#date2" class="left-second">6th Jun.</a> |
</li> | </li> | ||
| Line 51: | Line 71: | ||
</ul> | </ul> | ||
| - | <ul id="nav2"> | + | <ul id="nav2" class="slideNav"> |
<li> | <li> | ||
<a href="#" class="right-first">20th Apr.</a> | <a href="#" class="right-first">20th Apr.</a> | ||
| Line 72: | Line 92: | ||
</li> | </li> | ||
</ul> | </ul> | ||
| - | <img id="time-list-image" src=" | + | <img id="time-list-image" src="https://static.igem.org/mediawiki/2013/6/67/List.png"> |
</div> | </div> | ||
<div id="notebook"> | <div id="notebook"> | ||
| - | <img id="notebook-image" src=" | + | <img id="notebook-image" src="https://static.igem.org/mediawiki/2013/b/bd/Notebook2.png"> |
</div> | </div> | ||
</div> | </div> | ||
| Line 84: | Line 104: | ||
<div class="scrollblock" id="date1"> | <div class="scrollblock" id="date1"> | ||
<div id="time-list-fix"> | <div id="time-list-fix"> | ||
| - | <ul id="fix-nav"> | + | <ul id="fix-nav" class="slideNav"> |
<li> | <li> | ||
<a href="#" class="fix-left-first">20th Apr.</a> | <a href="#" class="fix-left-first">20th Apr.</a> | ||
| Line 125: | Line 145: | ||
</li> | </li> | ||
</ul> | </ul> | ||
| - | <img id="time-list-image" src=" | + | <img id="time-list-image" src="https://static.igem.org/mediawiki/2013/6/67/List.png"> |
</div> | </div> | ||
<div id="date1-photo"> | <div id="date1-photo"> | ||
| - | <img id="date1-photo-image" src=" | + | <img id="date1-photo-image" src="https://static.igem.org/mediawiki/2013/b/bb/Photo1.png"> |
</div> | </div> | ||
| Line 143: | Line 163: | ||
<div id="time-list-fix"> | <div id="time-list-fix"> | ||
| - | <ul id="fix-nav"> | + | <ul id="fix-nav" class="slideNav"> |
<li> | <li> | ||
<a href="#" class="fix-left-first">20th Apr.</a> | <a href="#" class="fix-left-first">20th Apr.</a> | ||
| Line 184: | Line 204: | ||
</li> | </li> | ||
</ul> | </ul> | ||
| - | <img id="time-list-image" src=" | + | <img id="time-list-image" src="https://static.igem.org/mediawiki/2013/6/67/List.png"> |
</div> | </div> | ||
| Line 195: | Line 215: | ||
<div id="date2-photo"> | <div id="date2-photo"> | ||
| - | <img id="date2-photo-image" src=" | + | <img id="date2-photo-image" src="https://static.igem.org/mediawiki/2013/3/32/Photo2.png"> |
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
| + | </div> | ||
| + | <script> | ||
| + | $(document).ready(function() { | ||
| + | |||
| + | // initialize the plugin, pass in the class selector -70for the sections of content (blocks) | ||
| + | var scrollorama = $.scrollorama({ blocks:'.scrollblock' }); | ||
| + | |||
| + | scrollorama | ||
| + | .animate('#file-folder-image',{delay:400, duration:600,property:'top',start:50,end:10}) | ||
| + | .animate('#time-list-image',{delay:0,duration:600,property:'top',start:-140,end:-800}) | ||
| + | .animate('#nav1',{delay:0,duration:600,property:'top',start:95,end:-800}) | ||
| + | .animate('#nav2',{delay:0,duration:600,property:'top',start:-40,end:-800}) | ||
| + | |||
| + | .animate('#notebook-image',{delay:0,duration:600,property:'top',start:-670,end:-200}); | ||
| + | |||
| + | scrollorama | ||
| + | .animate('#date1-photo-image',{delay:0,duration:600,property:'top',start:400,end:-605}) | ||
| + | .animate('#date1-task',{delay:400,duration:600,property:'top',start:400,end:-1150}); | ||
| + | |||
| + | scrollorama | ||
| + | .animate('#date2-task',{delay:0,duration:600,property:'top',start:0,end:-550}) | ||
| + | .animate('#date2-photo-image',{delay:100,duration:600,property:'top',start:1700,end:100}); | ||
| + | // animate the title letters to explode | ||
| + | //scrollorama | ||
| + | // .animate('#title',{ duration: 300, property:'zoom', end: 8 }) | ||
| + | |||
| + | // scrollorama | ||
| + | // .animate('#parallax2',{ delay: 400, duration: 600, property:'top', start:800, end:-1500 }) | ||
| + | // .animate('#parallax3',{ delay: 200, duration: 1200, property:'top', start:500, end:-1200 }); | ||
| + | |||
| + | // $clone.find('span') | ||
| + | // .each( function( idx, el ){ | ||
| + | // scrollorama.animate( $(this), { delay:400, duration: 500, | ||
| + | // property:'top', end: 300, | ||
| + | // easing: easing_array[idx] }); | ||
| + | // }) | ||
| + | |||
| + | }); | ||
| + | </script> | ||
<footer></footer> | <footer></footer> | ||
</body> | </body> | ||
</html> | </html> | ||
Latest revision as of 03:33, 26 September 2013
Team Leader of SYSU-Software,IGEM 2013.
Taking charge of the design and progress of the
whole project.
Team Leader of SYSU-Software,IGEM 2013.
Taking charge of the design and progress of the
whole project.
