Team:SYSU-Software/notebook

From 2013.igem.org

(Difference between revisions)
(Created page with "<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn...")
 
(12 intermediate revisions not shown)
Line 4: Line 4:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Style-Type" content="text/css" />
 +
<link href="https://raw.github.com/lovedayluk/iGEM2013/master/style.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" >
<link href="https://raw.github.com/lovedayluk/iGEM2013/master/style.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" >
<link href="https://2012.igem.org/Team:SYSU-Software/prefix.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" >
<link href="https://2012.igem.org/Team:SYSU-Software/prefix.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" >
<link href="https://2012.igem.org/Team:SYSU-Software/bootstrap.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
<link href="https://2012.igem.org/Team:SYSU-Software/bootstrap.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
<link href="https://2012.igem.org/Team:SYSU-Software/flatui.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
<link href="https://2012.igem.org/Team:SYSU-Software/flatui.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+
<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&amp;ctype=text/css" rel="stylesheet" type="text/css" />
-
<script src="http://code.jquery.com/jquery-1.9.1.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
<link href="https://2013.igem.org/Team:SYSU-Software/footer.css?action=raw&amp;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.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/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>
-
<head>
+
<script src="https://2013.igem.org/Team:SYSU-Software/jquery.smooth-scroll.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
-
<meta charset="utf-8">
+
 
-
<title>new</title>
+
<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>
</head>
<body>
<body>
-
<div id="main">
 
  <div id="navigation"></div>
  <div id="navigation"></div>
-
      <div id="main-box">
+
 
-
  <!--<img src="https://static.igem.org/mediawiki/2012/d/d9/Test.png" alt="test">-->
+
 
-
          <p>notebook</p>
+
<!-- notebook content part-->
-
      </div>
+
<div class="wrapper">
-
      <footer></footer>
+
    <div id="notebook-container" >
 +
        <div class="scrollblock" id="intro">
 +
 
 +
            <div id="file-folder">
 +
                <img id="file-folder-image" src="https://static.igem.org/mediawiki/2013/d/d7/File-folder.png">
 +
            </div>
 +
 
 +
            <div id="time-list">
 +
                <ul id="nav1" class="slideNav">
 +
                    <li>
 +
                        <a href="#date1" class="left-first">4th Apr.</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="#date2" class="left-second">6th Jun.</a>
 +
                    </li>
 +
                   
 +
                    <li>
 +
                        <a href="#" class="left-third">29th Jul.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="left-forth">10th Sep.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="left-fifth">12th Oct.</a>
 +
                    </li>
 +
                </ul>
 +
 
 +
                <ul id="nav2" class="slideNav">
 +
                    <li>
 +
                        <a href="#" class="right-first">20th Apr.</a>
 +
                    </li>
 +
                   
 +
                    <li>
 +
                        <a href="#" class="right-second">19th May.</a>
 +
                    </li>
 +
                   
 +
                    <li>
 +
                        <a href="#" class="right-third">20th Jul.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="right-forth">31th Aug.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="right-fifth">1st Oct.</a>
 +
                    </li>
 +
                </ul>
 +
                <img id="time-list-image" src="https://static.igem.org/mediawiki/2013/6/67/List.png">
 +
 
 +
            </div>
 +
 
 +
            <div id="notebook">
 +
                <img id="notebook-image" src="https://static.igem.org/mediawiki/2013/b/bd/Notebook2.png">
 +
            </div>
 +
        </div>
 +
 
 +
 
 +
        <div class="scrollblock" id="date1">
 +
            <div id="time-list-fix">
 +
                <ul id="fix-nav" class="slideNav">
 +
                    <li>
 +
                        <a href="#" class="fix-left-first">20th Apr.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="fix-left-second">29th Apr.</a>
 +
                    </li>
 +
                   
 +
                    <li>
 +
                        <a href="#" class="fix-left-third">19th May.</a>
 +
                    </li>
 +
                   
 +
                    <li>
 +
                        <a href="#" class="fix-left-forth">20th Jun.</a>
 +
                    </li>
 +
                   
 +
                    <li>
 +
                        <a href="#" class="fix-left-fifth">20th Jul.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="fix-left-sixth">29th Jul.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="fix-left-seventh">31th Aug.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="fix-left-eighth">10th Sep.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="fix-left-ninth">1st Oct.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="fix-left-tenth">12th Oct.</a>
 +
                    </li>
 +
                </ul> 
 +
                <img id="time-list-image" src="https://static.igem.org/mediawiki/2013/6/67/List.png">
 +
            </div>
 +
 
 +
            <div id="date1-photo">
 +
                <img id="date1-photo-image" src="https://static.igem.org/mediawiki/2013/b/bb/Photo1.png">
 +
            </div>
 +
 
 +
            <span id="date1-task">
 +
                <span>20th April</span><br><br>
 +
                Team Leader of SYSU-Software,IGEM 2013.<br>
 +
                Taking charge of the design and progress of the<br>
 +
                whole project.
 +
            </span>
 +
        </div>
 +
 
 +
        <div class="scrollblock" id="date2">
 +
 
 +
            <div id="time-list-fix">
 +
                <ul id="fix-nav" class="slideNav">
 +
                    <li>
 +
                        <a href="#" class="fix-left-first">20th Apr.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="fix-left-second">29th Apr.</a>
 +
                    </li>
 +
                   
 +
                    <li>
 +
                        <a href="#" class="fix-left-third">19th May.</a>
 +
                    </li>
 +
                   
 +
                    <li>
 +
                        <a href="#" class="fix-left-forth">20th Jun.</a>
 +
                    </li>
 +
                   
 +
                    <li>
 +
                        <a href="#" class="fix-left-fifth">20th Jul.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="fix-left-sixth">29th Jul.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="fix-left-seventh">31th Aug.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="fix-left-eighth">10th Sep.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="fix-left-ninth">1st Oct.</a>
 +
                    </li>
 +
 
 +
                    <li>
 +
                        <a href="#" class="fix-left-tenth">12th Oct.</a>
 +
                    </li>
 +
                </ul> 
 +
                <img id="time-list-image" src="https://static.igem.org/mediawiki/2013/6/67/List.png">
 +
            </div>
 +
           
 +
            <span id="date2-task">
 +
                <span>29th April</span><br><br>
 +
                Team Leader of SYSU-Software,IGEM 2013.<br>
 +
                Taking charge of the design and progress of the<br>
 +
                whole project.
 +
            </span>
 +
           
 +
            <div id="date2-photo">
 +
                <img id="date2-photo-image" src="https://static.igem.org/mediawiki/2013/3/32/Photo2.png">
 +
            </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>
</body>
</body>
</html>
</html>

Latest revision as of 03:33, 26 September 2013

Team:SYSU-Software

20th April

Team Leader of SYSU-Software,IGEM 2013.
Taking charge of the design and progress of the
whole project.
29th April

Team Leader of SYSU-Software,IGEM 2013.
Taking charge of the design and progress of the
whole project.

Retrieved from "http://2013.igem.org/Team:SYSU-Software/notebook"