Difference between revisions of "Team:XJTU-China/Description"

Line 1: Line 1:
 
{{XJTU-China/style}}
 
{{XJTU-China/style}}
 +
 +
 
<html lang="en" dir="ltr">
 
<html lang="en" dir="ltr">
  
 
<head>
 
<head>
−
     <title>Team:XJTU-China</title>
+
     <title>Project</title>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
−
     <meta name="keywords" content="2021iGEM,Xi'an Jiaotong University,XJTU-China,XJTU,Tryptophan,
+
     <meta name="keywords" content="iGEM,Xi'an Jiaotong University,XJTU-China,Tryptophan,
 
         Trp,Biosynthesis,E.coli">
 
         Trp,Biosynthesis,E.coli">
−
     <meta name="description"
+
     <meta name="description" content="Welcome to 2021 XJTU-China">
−
        content="Welcome to 2021 XJTU-China! This page is the home page of 2021 XJTU-China's project. We are devoted to enhance the living quality of every insomnia sufferer by a simple gene circuit to overproduce a sleep-aid matter: tryptophan.">
+
 
     <meta name="viewport"
 
     <meta name="viewport"
 
         content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
 
         content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
Line 17: Line 18:
 
     <link rel="stylesheet" type="text/css"
 
     <link rel="stylesheet" type="text/css"
 
         href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/bootstrap&action=raw&ctype=text/css" />
 
         href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/bootstrap&action=raw&ctype=text/css" />
−
     <!-- <link rel="stylesheet" type="text/css"
+
     <link rel="stylesheet" type="text/css"
−
         href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/style&action=raw&ctype=text/css" /> -->
+
         href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/style&action=raw&ctype=text/css" />
 +
    <link rel="stylesheet" type="text/css"
 +
        href="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/youtube&action=raw&ctype=text/css" />
 +
 
 
</head>
 
</head>
  
 
<body>
 
<body>
 
     <!--banner-->
 
     <!--banner-->
−
     <div class="container row">
+
     <div class="container row fixedBackground">
−
         <main>
+
         <div class="fixedBackgroundImg"
−
            <!-- Initial markup -->
+
            style="background-image: url(https://static.igem.org/mediawiki/2021/f/fd/T--XJTU-China--bg.jpg);"></div>
−
            <div class="segmenter"
+
−
                style="background-image: url(https://static.igem.org/mediawiki/2021/f/fd/T--XJTU-China--bg.jpg)"></div>
+
−
            <h2 class="trigger-headline trigger-headline--hidden">
+
−
                <span class="bannerHeader">Hin./ious</span>
+
−
            </h2>
+
−
        </main>
+
 
     </div>
 
     </div>
 
     <!--//banner-->
 
     <!--//banner-->
 +
 
     <!--about-->
 
     <!--about-->
−
     <section>
+
     <section class="main">
−
         <div class="container d-flex flex-column justify-content-center align-items-center">
+
         <div class="container mainBox" id="mainBox">
−
             <div class="row">
+
             <div class="row" id="container">
−
                 <div class="col-lg-2"></div>
+
                 <div class="side col-lg-3">
−
                <div class="xjtuText col-lg-8">
+
                    <nav class="dr-menu">
−
                    <hgroup>
+
                        <div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a
−
                        <h1>Brief Intro.</h1>
+
                                class="dr-label">Description</a></div>
−
                         <h2>a tryptophan producer</h2>
+
                         <ul>
−
                    </hgroup>
+
                            <li><a class="dr-icon dr-icon-user cate" href="#part1">Part1</a></li>
−
                    <p class="green">
+
                            <li><a class="dr-icon dr-icon-camera cate" href="#part2">Part2</a></li>
−
                        Synthetic biology is a science discipline that differs a lot from the others. Usually, you
+
                            <li><a class="dr-icon dr-icon-heart cate" href="#part3">Part3</a></li>
−
                        would
+
                            <li><a class="dr-icon dr-icon-bullhorn cate" href="#part4">Part4</a></li>
−
                        use
+
                            <li><a class="dr-icon dr-icon-download cate" href="#part5">Part5</a></li>
−
                        the scientific method to obtain results in the majority of life sciences, centering your
+
                         </ul>
−
                        work on
+
                    </nav>
−
                        making observations and performing experiments. However, synthetic biology goes beyond that,
+
                </div>
−
                        it
+
                <div class="page xjtuText row col-lg-9 col-12 justify-content-center">
−
                        is
+
                     <h1>hin./ious</h1>
−
                        all about constructing something new from parts (biological parts if you may). That is why,
+
                     <p class="green" id="part1">PART1 This menu is inspired by the left side menu found on YouTube. When clicking on
−
                        sometimes the engineering design process <b>fits</b> better with these projects, since a
+
                        the menu label and
−
                        product
+
                        icon,
−
                        has
+
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
−
                        to be
+
                        up.
−
                        built, a machine that performs a task, where it is more important what it does rather than
+
                        To close the menu, <b>the menu icon</b> needs to be clicked again.
−
                         how,
+
                        This menu is inspired by the left s
−
                        yet
+
                         To close the menu, the menu icon needs to be clicked again.
−
                        still has to be tested. Funnily enough, that's why iGEM stands for genetically engineered
+
                         This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
−
                        machines.
+
−
                     </p>
+
−
                     <p class="brown">To close the menu, the menu icon needs to be clicked again. This menu is inspired
+
−
                        by the left
+
−
                        side
+
−
                        menu found on YouTube. When <b>clicking on the menu</b> label and icon, the main menu
+
−
                        appears
+
−
                        beneath and
+
−
                        the menu icon slides to the right side while the label slides up. To close the menu, the
+
−
                        menu
+
−
                        icon
+
−
                        needs to be clicked again. This menu is inspired by the left side menu found on YouTube.
+
−
                         When
+
−
                        clicking on the menu label and icon, the main menu appears beneath and the menu icon slides
+
−
                        to
+
−
                        the
+
−
                        right side while the label slides up. To close the menu, the menu icon needs to be clicked
+
−
                        again.
+
−
                         This menu is inspired by the left side menu found on YouTube. When clicking on the menu
+
−
                        label
+
 
                         and
 
                         and
−
                         icon, To close the menu, the menu icon needs to be clicked again. This menu is inspired by
+
                         icon,</p>
−
                        the
+
                    <p class="brown" id="part2" >
−
                        left
+
                        PART2 To close the menu, the menu icon needs <b>to be clicked again.
−
                        side menu found on YouTube. When clicking on the menu label and icon,
+
                            This menu is inspired</b> by the left side menu found on YouTube. When clicking on the menu
−
                    </p>
+
−
                    <p class="green">the main menu appears beneath and the menu icon slides to the right side while the
+
 
                         label
 
                         label
−
                         slides
+
                         and
−
                         up.o
+
                        icon,
−
                         be clicked again. This menu is inspired by the left side menu found on YouTube. When
+
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
−
                         clicking on
+
                         up.
−
                         the
+
                         To close the menu, the menu icon needs to be clicked again.
−
                         menu label and icon, the main menu appears beneath and the menu icon slides to the right
+
                        This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
−
                         side
+
                         and
−
                         while
+
                        icon,
−
                         the label slides up. To close the menu, the menu icon needs to be clicked again. This menu
+
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
−
                         is
+
                        up.
−
                         inspired by the left side menu found on YouTube. When clicking on the menu label and icon,
+
                        To close the menu, the menu icon needs to be clicked again.
−
                         the
+
                        This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
−
                         main
+
                         and
−
                         menu appears beneath and the menu icon slides to the right side while the label slides up.
+
                        icon,
−
                         To
+
                        To close the menu, the menu icon needs to be clicked again.
−
                         close
+
                         This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
−
                         the menu, the menu icon needs to be clicked again. This menu is inspired by the left side
+
                        and
−
                         menu
+
                        icon,</p>
−
                         found
+
                    <p class="green" id="part3">
−
                         on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the
+
                        PART3 the main menu appears beneath and the menu icon slides to the right side while the label slides
−
                         menu
+
                         up.
−
                         icon slides to the right side while the label slides up. the main menu appears beneath and
+
                        To close the menu, the menu icon needs to be clicked again.
−
                         the
+
                        This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
−
                         menu
+
                         and
−
                         icon slides to the right side while the label slides up. To close the menu, the menu icon
+
                        icon,
−
                         needs
+
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
−
                         to
+
                         up.
−
                         be clicked again. This menu is inspired by the left side menu found on YouTube. When
+
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
−
                         clicking on
+
                        up.
−
                         the
+
                        To close the menu, the menu icon needs t
−
                         menu label and icon, the main menu appears beneath and the menu icon slides to the right
+
                        To close the menu, the menu icon needs to be clicked again.
 +
                        This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                         and
 +
                         icon,
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                        up.
 +
                        To close the menu, the menu icon needs to be clicked again.
 +
                        This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                        and
 +
                        icon,</p>
 +
                    <p class="brown" id="part4">
 +
                         PART4 the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                         up.o be clicked again.
 +
                         This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                        and
 +
                        icon,
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                        up.
 +
                         To close the menu, the menu icon needs to be clicked again.
 +
                         This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                        and
 +
                        icon,
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                        up.
 +
                        To close the menu, the menu icon needs to be clicked again.
 +
                         This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                        and
 +
                        icon,
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                        up.
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                        up.
 +
                        To close the menu, the menu icon needs to be clicked again.
 +
                        This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                         and
 +
                        icon,
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                         up.ide menu found on YouTube. When clicking on the menu label and
 +
                         icon,
 +
                        To close the menu, the menu icon needs to be clicked again.
 +
                        This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                        and
 +
                        icon,
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                         up.</p>
 +
                    <p class="green" id="part5">
 +
                        PART5 To close the menu, the menu icon needs to be clicked again.
 +
                         This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                        and
 +
                        icon,
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                        up.
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                         up.
 +
                        To close the menu, the menu icon needs t
 +
                         To close the menu, the menu icon needs to be clicked again.
 +
                        This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                        and
 +
                         icon,
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                        up.
 +
                        To close the menu, the menu icon needs to be clicked again.
 +
                         This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                        and
 +
                        icon,
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                        up.o be clicked again.
 +
                        This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                        and
 +
                        icon,
 +
                        the main menu appears beneath and t
 +
                        To close the menu, the menu icon needs to be clicked again.
 +
                         This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                        and
 +
                        icon,
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                         up.
 +
                        To close the menu, the menu icon needs to be clicked again.
 +
                        This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                         and
 +
                        icon,
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                        up.he menu icon slides to the right side while the label slides
 +
                        up.
 +
                        To close the menu, the menu icon needs to be clicked again.
 +
                        >This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
 +
                        and
 +
                        icon,
 +
                         the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                         up.
 +
                        To close the menu, the menu icon needs to be clicked again.
 +
 
 +
                        his menu is inspired by the left side menu found on YouTube. When clicking on the menu label and
 +
                        icon,
 +
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
 +
                        up.
 +
                        To close the menu, the menu icon needs to be clicked again.This menu is inspired by the left
 
                         side
 
                         side
−
                         while
+
                         menu found on YouTube. When clicking on the menu label and
−
                        the label slides up.ide menu found on YouTube. When clicking on the menu label and icon, To
+
                         icon,
−
                         close
+
                         the main menu appears beneath and the menu icon slides to the right side while the label slides
−
                        the menu, the menu icon needs to be clicked again. This menu is inspired by the left side
+
                        up.
−
                         menu
+
                         To close the menu, the menu icon needs to be clicked again.</p>
−
                        found
+
−
                        on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the
+
−
                        menu
+
−
                        icon slides to the right side while the label slides up.</p>
+
−
                </div>
+
−
                <div class="col-lg-2"></div>
+
−
            </div>
+
−
            <div class="row">
+
−
                <div class="linkBox col-lg-3 col-md-6 col-sm-12">
+
−
                    <div class="linkBox-items">
+
−
                         <span class="fa fa-flask" aria-hidden="true"></span>
+
−
                        <h4 class="shadow-lg"> Wetlab</h4>
+
−
                    </div>
+
−
                </div>
+
−
                <div class="linkBox col-lg-3 col-md-6 col-sm-12">
+
−
                    <div class="linkBox-items">
+
−
                        <span class="fa fa-area-chart" aria-hidden="true"></span>
+
−
                        <h4> Modelling</h4>
+
−
                    </div>
+
−
                </div>
+
−
                <div class="linkBox col-lg-3 col-md-6 col-sm-12">
+
−
                    <div class="linkBox-items">
+
−
                        <span class="fa fa-globe" aria-hidden="true"></span>
+
−
                        <h4> Human Practices</h4>
+
−
                    </div>
+
−
                </div>
+
−
                <div class="linkBox col-lg-3 col-md-6 col-sm-12">
+
−
                    <div class="linkBox-items">
+
−
                        <span class="fa fa-user" aria-hidden="true"></span>
+
−
                        <h4> Team</h4>
+
−
                    </div>
+
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 163: Line 205:
 
     </section>
 
     </section>
 
     <!--//about-->
 
     <!--//about-->
−
    <!--highlights-->
+
 
−
    <section class="align-padding-50-80">
+
−
        <div class="xjtuText text-center">
+
−
            <h1>highlights
+
−
            </h1>
+
−
            <h2>A lot of wonderful works<h2>
+
−
        </div>
+
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="grid">
+
−
                    <figure class="effect-zoe">
+
−
                        <img src="https://static.igem.org/mediawiki/2021/b/b9/T--XJTU-China--25.jpg" alt="img25" />
+
−
                        <figcaption>
+
−
                            <div class="container d-flex align-items-center">
+
−
                                <h2 class="mr-auto"><span>XJTU</span>-China</h2>
+
−
                                <span class="lottieBtn viewBtn"></span>
+
−
                                <span class="lottieBtn hitLikeBtn"></span>
+
−
                            </div>
+
−
                            <p class="description">Perhaps you have no idea who is Hincious.
+
−
                            </p>
+
−
                        </figcaption>
+
−
                    </figure>
+
−
                    <figure class="effect-zoe">
+
−
                        <img src="https://static.igem.org/mediawiki/2021/a/a1/T--XJTU-China--26.jpg" alt="img26" />
+
−
                        <figcaption>
+
−
                            <div class="container d-flex align-items-center">
+
−
                                <h2 class="mr-auto"><span>XJTU</span>-China</h2>
+
−
                                <span class="lottieBtn viewBtn"></span>
+
−
                                <span class="lottieBtn hitLikeBtn"></span>
+
−
                            </div>
+
−
                            <p class="description">Perhaps you have no idea who is Hincious.
+
−
                            </p>
+
−
                        </figcaption>
+
−
                    </figure>
+
−
                </div>
+
−
            </div>
+
−
        </div>
+
−
    </section>
+
−
    <!--//highlights-->
+
 
     <!--JS-->
 
     <!--JS-->
 
     <script type="text/javascript"
 
     <script type="text/javascript"
 
         src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/jquery&action=raw&ctype=text/javascript"></script>
 
         src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/jquery&action=raw&ctype=text/javascript"></script>
−
    <script type="text/javascript"
 
−
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/lottie&action=raw&ctype=text/javascript"></script>
 
 
     <script type="text/javascript"
 
     <script type="text/javascript"
 
         src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/bootstrapJS&action=raw&ctype=text/javascript"></script>
 
         src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/bootstrapJS&action=raw&ctype=text/javascript"></script>
 
     <script type="text/javascript"
 
     <script type="text/javascript"
−
         src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/seg_anime&action=raw&ctype=text/javascript"></script>
+
         src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/ytmenu&action=raw&ctype=text/javascript"></script>
−
     <script type="text/javascript"
+
     <!--//JS-->
−
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/seg_imgloaded&action=raw&ctype=text/javascript"></script>
+
 
−
    <script type="text/javascript"
+
−
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/seg_main&action=raw&ctype=text/javascript"></script>
+
 
     <!--Temporary script-->
 
     <!--Temporary script-->
−
     <!--viewBtn-->
+
     <!--smoothNav-->
 
     <script>
 
     <script>
−
         var viewBtn = $('.viewBtn');
+
         window.addEventListener('scroll', () => {
−
        var n = viewBtn.length;
+
            var h = document.getElementById('topHeader');
−
        var animData = new Array(n);
+
            height = h.clientHeight;
−
        var animation = new Array(n);
+
            let header = document.querySelector('header');
−
        for (i = 0; i < n; i++) {
+
            let logo = document.querySelector('.logo');
−
            animData[i] = {
+
            header.classList.toggle('sticky', window.scrollY > height);
−
                container: viewBtn[i], // the dom element that will contain the animation
+
             logo.classList.toggle('sticky', window.scrollY > height);
−
                renderer: 'svg',
+
         })
−
                loop: true,
+
−
                autoplay: true,
+
−
                path: 'https://static.igem.org/mediawiki/2021/1/14/T--XJTU-China--viewBtn.txt' // the path to the animation json
+
−
            }
+
−
            animation[i] = lottie.loadAnimation(animData[i]);
+
−
             animation[i].setSpeed(1.2);
+
−
         }
+
 
     </script>
 
     </script>
−
     <!--hitLikeBtn&toggle-->
+
     <!--to-top btn-->
 
     <script>
 
     <script>
−
         var hitLikeBtn = $('.hitLikeBtn');
+
         $(document).ready(function () {
−
        var n = hitLikeBtn.length;
+
            $("#to-top").hide();
−
        var animData = new Array(n);
+
            $(function () {
−
        var animation = new Array(n);
+
                $(window).scroll(function () {
−
        for (i = 0; i < n; i++) {
+
                    if ($(window).scrollTop() > 600) {
−
            animData[i] = {
+
                        $("#to-top").fadeIn(500);
−
                 container: hitLikeBtn[i], // the dom element that will contain the animation
+
                    } else {
−
                 renderer: 'svg',
+
                        $("#to-top").fadeOut(500);
−
                loop: false,
+
                    }
−
                autoplay: false,
+
                 });
−
                 path: 'https://static.igem.org/mediawiki/2021/a/a9/T--XJTU-China--hitLikeBtn.txt' // the path to the animation json
+
                 $("#to-top").click(function () {
−
             }
+
                    $('body,html').animate({
−
             animation[i] = lottie.loadAnimation(animData[i]);
+
                        scrollTop: 0
−
        }
+
                    }, 500);
−
        hitLikeBtn.click(function () {
+
                    return false;
−
             var index = hitLikeBtn.index(this);
+
                 });
−
             var flag = this.classList.toggle('isLike');
+
            });
−
             if (flag) {
+
        });
−
                 animation[index].playSegments([0, 19], true);
+
    </script>
 +
 
 +
    <!--dr-menuSliding-->
 +
    <script>
 +
        window.addEventListener('scroll', function () {
 +
             var scroll = $(window).scrollTop();
 +
             var pageHeight = $(window).height();
 +
            var pageWidth = $(window).width();
 +
            var drMenu = $(".dr-menu");
 +
             var containerHeight = $("#container").height();
 +
             var containerTop = $("#container").offset().top;
 +
            var drMenuHeight = drMenu.height();
 +
 
 +
             if (pageWidth < 992) {
 +
                 drMenu.hide();
 
             }
 
             }
 
             else {
 
             else {
−
                 animation[index].goToAndStop(0, true);
+
                 drMenu.show();
 +
                if (scroll + drMenuHeight >= containerHeight + containerTop - 215) {
 +
                    drMenu.css({
 +
                        "position": "relative",
 +
                        "top": (containerHeight - drMenuHeight - 65).toString() + "px"
 +
                    });
 +
                }
 +
                else if (scroll > 0.7 * pageHeight) {
 +
                    drMenu.css({
 +
                        "position": "fixed",
 +
                        "top": (150).toString() + "px"
 +
                    });
 +
                }
 +
                else {
 +
                    drMenu.css({
 +
                        "position": "relative",
 +
                        "top": "50px"
 +
                    });
 +
                }
 
             }
 
             }
−
         }
+
         })
−
        )
+
 
     </script>
 
     </script>
−
     <!--segmentEffectOfBanner-->
+
 
−
     <script>
+
     <!--dr-menuSencing-->
−
            (function () {
+
     <!-- <script>
−
                var headline = document.querySelector('.trigger-headline'),
+
        var sensor = $(".node");
−
                    trigger = document.querySelector('.btn--trigger'),
+
        var cate = $(".cate");
−
                    face = document.querySelector('.segmenter'),
+
        var n = sensor.length;
−
                    segmenter = new Segmenter(face, {
+
        var h = new Array(n);
−
                        pieces: 8,
+
        var flag=new Array(n);
−
                        positions: [{
+
        for (let i = 0; i < n; i++) {
−
                            top: 0,
+
             h[i] = $(sensor[i]).offset().top;
−
                            left: 0,
+
             flag[i]=false;
−
                            width: 100,
+
        }
−
                            height: 100
+
        flag[0]=true;
−
                        }, {
+
 
−
                            top: 0,
+
        $(document).ready(
−
                            left: 0,
+
             $(window).scroll(function () {
−
                            width: 100,
+
                 let index;
−
                            height: 100
+
                let height = $(window).scrollTop();
−
                        }, {
+
                 console.log(height);
−
                            top: 0,
+
                 for (let i = 1; i < n; i++) {
−
                            left: 0,
+
                    if (height >= h[i]) {
−
                            width: 100,
+
                        index = i;
−
                            height: 100
+
                        flag[i]=true;
−
                        }, {
+
                        flag[i-1]-false;
−
                            top: 0,
+
                        break;
−
                            left: 0,
+
                    }
−
                            width: 100,
+
−
                            height: 100
+
−
                        }, {
+
−
                            top: 0,
+
−
                            left: 0,
+
−
                            width: 100,
+
−
                            height: 100
+
−
                        }, {
+
−
                            top: 0,
+
−
                            left: 0,
+
−
                            width: 100,
+
−
                            height: 100
+
−
                        }, {
+
−
                            top: 0,
+
−
                            left: 0,
+
−
                            width: 100,
+
−
                            height: 100
+
−
                        }, {
+
−
                            top: 0,
+
−
                            left: 0,
+
−
                            width: 100,
+
−
                            height: 100
+
−
                        }],
+
−
                        shadows: false,
+
−
                        parallax: true,
+
−
                        parallaxMovement: {
+
−
                            min: 10,
+
−
                            max: 20
+
−
                        },
+
−
                        animation: {
+
−
                            duration: 2500,
+
−
                            easing: 'easeOutExpo',
+
−
                            delay: 0,
+
−
                            opacity: .1,
+
−
                            translateZ: {
+
−
                                min: 5,
+
−
                                max: 25
+
−
                            }
+
−
                        },
+
−
                        onReady: function () {
+
−
                            segmenter.animate();
+
−
                            headline.classList.remove('trigger-headline--hidden');
+
−
                        }
+
−
                    });
+
−
            })();
+
−
    </script>
+
−
    <!--Hin./ious-->
+
−
    <script>
+
−
        window.onload = function () {
+
−
             // 获取div节点的dom对象
+
−
            var divNode = document.querySelector('.bannerHeader');
+
−
             // 需要写入页面的字符串，这里的字符内容就是待会要写入网页的内容
+
−
            var codingStr = "Hin./ious";
+
−
            // 字符串索引
+
−
            var j = 0;
+
−
            // 创建循环定时器，通过循环定时器每200毫米执行里面的回调函数
+
−
             var coding = setInterval(function () {
+
−
                 // slice()方法是截取字符串指定位置的方法
+
−
                 // 第一个参数是起始位置的索引，第二个参数是结束位置的索引（不包含结束位置）
+
−
                // 最后返回的就是截取的字串
+
−
                // 最后是模拟光标的效果
+
−
                divNode.innerHTML = codingStr.slice(0, j) + '_';
+
−
                 j++;
+
−
                // 如果索引大于了字符串的长度，把最后的光标删除并清除计时器
+
−
                if (j > codingStr.length) {
+
−
                    divNode.innerHTML = codingStr.slice(0, j);
+
−
                    clearInterval(coding);
+
 
                 }
 
                 }
−
             }, 200)
+
 
 +
             })
 +
        )
 +
 
 +
 
 +
        function scale(bool) {
 +
 
 
         }
 
         }
−
     </script>
+
 
 +
     </script> -->
 +
    <!--//Temporary Script-->
 
</body>
 
</body>
  

Revision as of 04:57, 9 July 2021


Project

hin./ious

PART1 This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left s To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon,

PART2 To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon,

PART3 the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs t To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon,

PART4 the main menu appears beneath and the menu icon slides to the right side while the label slides up.o be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up.ide menu found on YouTube. When clicking on the menu label and icon, To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up.

PART5 To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs t To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up.o be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and t To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up.he menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. >This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again. his menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again.This menu is inspired by the left side menu found on YouTube. When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again.

contact us

Xi'an Jiaotong University
28 Xianning West Road
Xi'an, Shaanxi, China, 710049
xjtu_igem@xjtu.edu.cn
Made with ❤️ by  
XJTU-iGEMers