Difference between revisions of "Team:CCU Taiwan"

Line 5: Line 5:
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
 
     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
−
     <script type="text/javascript" src="https://2018.igem.org/Template:CCU_Taiwan/Javascript?
+
     <script type="text/javascript" src="https://2018.igem.org/Template:CCU_Taiwan/Javascript/ops.js"></script>
−
action=raw&ctype=text/javascript"></script>
+
    <script type="text/javascript" src="https://2018.igem.org/Template:CCU_Taiwan/Javascript/ops1.9.1.js"></script>
 +
 
 
     <script>
 
     <script>
 +
  $(document).ready(function(){
 +
      $(".main").onepage_scroll({
 +
        sectionContainer: "section",
 +
        responsiveFallback: 600,
 +
        loop: true
 +
      });
 +
});
 +
 +
</script>
 +
</head>
  
−
    window.onscroll = function() {scrollFunction()};
 
  
−
    function scrollFunction() {
 
−
    if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
 
−
        document.getElementById("myBtn").style.display = "block";
 
−
    } else {
 
−
        document.getElementById("myBtn").style.display = "none";
 
−
    }
 
−
}
 
−
 
−
// When the user clicks on the button, scroll to the top of the document
 
−
function topFunction() {
 
−
    document.body.scrollTop = 0;
 
−
    document.documentElement.scrollTop = 0;
 
−
}
 
−
 
−
 
−
 
−
    function myFunction() {
 
−
        var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
 
−
        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
 
−
        var scrolled = (winScroll / height) * 100;
 
−
        document.getElementById("myBar").style.height = scrolled + "%";
 
−
    }
 
−
 
−
    $(document).ready(function() {
 
−
        // Add smooth scrolling to all links
 
−
        $("a").on('click', function(event) {
 
−
 
−
            // Make sure this.hash has a value before overriding default behavior
 
−
            if (this.hash !== "") {
 
−
                // Prevent default anchor click behavior
 
−
                event.preventDefault();
 
−
 
−
                // Store hash
 
−
                var hash = this.hash;
 
−
 
−
                // Using jQuery's animate() method to add smooth page scroll
 
−
                // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
 
−
                $('html, body').animate({
 
−
                    scrollTop: $(hash).offset().top
 
−
                }, 800, function() {
 
−
 
−
                    // Add hash (#) to URL when done scrolling (default click behavior)
 
−
                    window.location.hash = hash;
 
−
                });
 
−
            } // End if
 
−
        });
 
−
    });
 
−
 
−
    $(window).on('scroll', function() {
 
−
        if ($(window).scrollTop()) {
 
−
            $('.container').css('background', '#808080');
 
−
            $('nav ul li ul').css('background', '#808080');
 
−
            $('nav').css('opacity', '1');
 
−
        } else {
 
−
            $('.container').css('background', '#000000');
 
−
            $('nav ul li ul').css('background', '#000000');
 
−
            $('nav').css('opacity', '1');
 
−
        }
 
−
    });
 
−
    $(document).ready(function() {
 
−
        $('#fullPage').fullpage({
 
−
            anchors: ['page1', 'page2', 'page3'],
 
−
            scrollingSpeed: 800,
 
−
            navigation: true,
 
−
        });
 
−
    });
 
−
    </script>
 
−
</head>
 
 
  <header>
 
  <header>
 
         <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
 
         <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
Line 146: Line 88:
  
 
<body>
 
<body>
−
    <button onclick="topFunction()" id="top" title="Go to top">Top</button>
 
−
    <div id="fullPage">
 
  
−
        <div class="section">
 
  
−
            <video id="homelogo" loop muted data-autoplay>
+
<div class="wrapper">
−
              <source src="https://static.igem.org/mediawiki/2018/7/76/T--CCU_Taiwan--CCU_Taiwan_logo.mp4" type="video/mp4">
+
  <div class="main">
−
              <source src="https://static.igem.org/mediawiki/2018/7/7e/T--CCU_Taiwan--CCU_Taiwan_logo.webm" type="video/webm">
+
   
−
            </video>
+
      <section class="page1">
−
            <center>
+
        <div class="page_container">
−
              <a href="#page2" class="scroll-down"><img src="https://static.igem.org/mediawiki/2018/3/3b/T--CCU_Taiwan--down_button.png" width="60" hieght="60">
+
          <h1>One Page Scroll</h1>
−
              </a>
+
          <h2>Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin</h2>
−
            </center>
+
          <p class="credit">Created by <a href="http://www.thepetedesign.com">Pete R.</a>, Founder of <a href="http://www.bucketlistly.com" target="_blank">BucketListly</a></p>
 +
          <div class="btns">
 +
          <a class="reload btn" href="https://github.com/peachananr/onepage-scroll">Download on Github</a>
 +
        </div>
 +
      </div>
 +
      <img src="phones.png" alt="phones">
 +
      </section>
 +
   
 +
    <section class="page2">
 +
      <div class="page_container">
 +
          <h1>Ready-to-use plugin</h1>
 +
          <h2>All you need is an HTML markup, call the script and BAM!</h2>
 +
          <code class="html">
 +
          &lt;div class="main"&gt;<br>
 +
            &lt;section&gt;...&lt;/section&gt;<br>
 +
            &lt;section&gt;...&lt;/section&gt;<br>
 +
            ...<br>
 +
          &lt;/div&gt;
 +
        </code>
 +
       
 +
        <code class="js">
 +
          $(".main").onepage_scroll();
 +
        </code>
 +
      </div>
 +
      </section>
 +
   
 +
    <section class="page3">
 +
      <div class="page_container">
 +
          <h1>Pretty Neat Eh?</h1>
 +
          <h2>You can customise the animation timing, the selector or even the animation easing using CSS3. I can't wait to see what you guys will come up with. Don't forget to grab them for free on Github'</h2>
 +
          <div class="btns">
 +
          <a class="reload btn" href="https://github.com/peachananr/onepage-scroll">Download on Github</a>
 +
        </div>
 +
      </div>
 +
      </section>
 +
    </div>
 +
    <a class="back" href="http://www.thepetedesign.com/#design">Back to The Pete Design</a>
 +
    <a href="https://github.com/peachananr/onepage-scroll">
 +
        <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
  
−
        </div>
+
</a>
−
 
+
  </div>
−
        <div class="section" id="move">
+
−
          <div class="section2">
+
−
            <div class="content">
+
−
                <p class="first">CCU Taiwan Team</p>
+
−
                <p class="second">Project Description</p>
+
−
                <p class="description"> &emsp; We are aiming to create eco-friendly ligneous cups. We hope that the cups we make are waterproof and heat-resistant; furthermore, they can be naturally decomposed. You might think why we waste our whole summer vacation on this little cup which would be thrown soon that people make the drink inside be empty? We will tell you the reason soon.
+
−
                <br>
+
−
                <br>
+
−
 
+
−
                    &emsp; The most common stores in Taiwan are handmade drink stores. For us, these handmade drinks are part of our lives. These drinks are often packed in disposable paper cups that are coated with petrochemical, such as PP and PE, to make them waterproof. Nonetheless, these substances produce a large amount of paper that is difficult to be recycled, which causes serious pollution to our environment. Thus, we decide to create a cup coated with substitute which can be naturally decomposed in order to solve the problems.
+
−
 
+
−
                <br>
+
−
                <br>
+
−
 
+
−
                    &emsp; Lignin, which can be found in most of the plants, is a polymer mainly composed of three kinds of monolignol: p-coumaryl alcohol (H), coniferyl alcohol (G), and sinapyl alcohol (S). The ratio of the three monolignols vary from species to species. These three monolignols can go through polymerization by adding two enzymes—peroxidase and laccase. Therefore, we aim to modify the yeast to produce these two enzymes. We use the enzyme to catalyze three monolignol and form high-purity lignin. We will make the most use of its waterproof characteristic to coat on the cups.
+
−
 
+
−
                <br>
+
−
                <br>
+
−
 
+
−
                    &emsp; The highlights of our project are innovative as well as eco- friendly. We hope we can make the most use of lignin and do our best to protect the environment. With our lignin cups, everyone will be able to enjoy the convenience without polluting the Mother Earth.
+
−
 
+
−
                </p>
+
−
              </div>
+
−
            </div>
+
−
        </div>
+
−
 
+
−
 
+
−
        <div class="section">
+
−
            <video id="partvideo" loop muted data-autoplay>
+
−
              <source src="https://static.igem.org/mediawiki/2018/9/92/T--CCU_Taiwan--ccupartsvideo.mp4" type="video/mp4">
+
−
              <source src="https://static.igem.org/mediawiki/2018/3/3e/T--CCU_Taiwan--ccupartsvideo.webm" type="video/webm">
+
−
            </video>
+
−
        </div>
+
−
 
+
−
    </div>
+
  
 
</body>
 
</body>

Revision as of 07:55, 27 July 2018

One Page Scroll

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin

Created by Pete R., Founder of BucketListly

Download on Github
phones

Ready-to-use plugin

All you need is an HTML markup, call the script and BAM!

<div class="main">
<section>...</section>
<section>...</section>
...
</div> $(".main").onepage_scroll();

Pretty Neat Eh?

You can customise the animation timing, the selector or even the animation easing using CSS3. I can't wait to see what you guys will come up with. Don't forget to grab them for free on Github'

Download on Github
Back to The Pete Design Fork me on GitHub