Difference between revisions of "Team:XJTU-China"

(Undo revision 37928 by My Elliot (talk))
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>Team:XJTU-China/Project</title>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
−
     <meta name="keywords"
+
     <meta name="keywords" content="iGEM,Xi'an Jiaotong University,XJTU-China,Tryptophan,
−
        content="2021,iGEM,Xi'an Jiaotong University,XJTU-China,XJTU,Tryptophan,Trp,Biosynthesis,E.coli">
+
        Trp,Biosynthesis,E.coli">
 
     <meta name="description"
 
     <meta name="description"
−
         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.">
+
         content="Welcome to 2021 XJTU-China. Please check our recent work on tryptophan biosynthesis via E.coli">
 
     <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 18: Line 18:
 
         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/youtube&action=raw&ctype=text/css" />
 +
 
 
</head>
 
</head>
  
Line 24: Line 25:
 
     <!--banner-->
 
     <!--banner-->
 
     <section>
 
     <section>
−
         <div class="container row">
+
         <div class="container row fixedBackground">
−
             <main class="banner">
+
             <div class="fixedBackgroundImg"
−
                 <div class="bannerImg"
+
                 style="background-image: url(https://static.igem.org/mediawiki/2021/f/fd/T--XJTU-China--bg.jpg);"></div>
−
                    style="background-image: url(https://static.igem.org/mediawiki/2021/f/fd/T--XJTU-China--bg.jpg)">
+
−
                </div>
+
−
                <h2 class="trigger-headline bannerHeader"></h2>
+
−
            </main>
+
 
         </div>
 
         </div>
 
     </section>
 
     </section>
−
     <!--about-->
+
     <!--main-->
−
     <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>
+
                        <h3>Description</h3>
−
                         <h1>Brief Intro.</h1>
+
                         <ul>
−
                        <h2>a tryptophan producer</h2>
+
                            <li><a class="dr-icon dr-icon-user" href="#part1">Part1</a></li>
−
                    </hgroup>
+
                            <li><a class="dr-icon dr-icon-camera" href="#part2">Part2</a></li>
−
                    <p class="green">
+
                            <li><a class="dr-icon dr-icon-heart" href="#part3">Part3</a></li>
−
                        Synthetic biology is a science discipline that differs a lot from the others. Usually, you
+
                            <li><a class="dr-icon dr-icon-bullhorn" href="#part4">Part4</a></li>
−
                        would
+
                            <li><a class="dr-icon dr-icon-download" href="#part5">Part5</a></li>
−
                        use
+
                         </ul>
−
                        the scientific method to obtain results in the majority of life sciences, centering your
+
                    </nav>
−
                        work on
+
                </div>
−
                        making observations and performing experiments. However, synthetic biology goes beyond that,
+
                <div class="page xjtuText row col-lg-8 col-12 justify-content-center">
−
                        it
+
                     <h1>hin./ious</h1>
−
                        is
+
                     <p class="green" id="part1">PART1 This menu is inspired by the left side menu found on YouTube. When
−
                        all about constructing something new from parts (biological parts if you may). That is why,
+
                        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.
+
                        and
−
                     </p>
+
                        icon,</p>
−
                     <p class="brown">To close the menu, the menu icon needs to be clicked again. This menu is
+
                    <p class="brown" id="part2">
−
                        inspired
+
                         PART2 To close the menu, the menu icon needs <b>to be clicked again.
−
                        by the left
+
                            This menu is inspired</b> by the left side menu found on YouTube. When clicking on the menu
−
                        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
 
                         label
 
                         and
 
                         and
−
                         icon, To close the menu, the menu icon needs to be clicked again. This menu is inspired by
+
                         icon,
−
                         the
+
                        the main menu appears beneath and the menu icon slides to the right side while the label slides
−
                         left
+
                        up.
−
                         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.
−
                    </p>
+
                        This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
−
                     <p class="green">the main menu appears beneath and the menu icon slides to the right side while
+
                        and
−
                         the
+
                        icon,
−
                         label
+
                         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,</p>
 +
                     <p class="green" id="part3">
 +
                        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,</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
 
                         slides
−
                         up.o
+
                         up.o be clicked again.
−
                         be clicked again. This menu is inspired by the left side menu found on YouTube. When
+
                         This menu is inspired by the left side menu found on YouTube. When clicking on the menu label
−
                         clicking on
+
                        and
−
                         the
+
                        icon,
−
                         menu label and icon, the main menu appears beneath and the menu icon slides to the right
+
                        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. To close the menu, the menu icon needs to be clicked again. This menu
+
                         icon,
−
                        is
+
                         the main menu appears beneath and the menu icon slides to the right side while the label slides
−
                        inspired by the left side menu found on YouTube. When clicking on the menu label and icon,
+
                         up.
−
                         the
+
                         To close the menu, the menu icon needs to be clicked again.</p>
−
                        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>
+
 
                 </div>
 
                 </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>
 
−
    </section>
 
−
    <!--highlights-->
 
−
    <section>
 
−
        <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 data-dialog="dialog-1" 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 data-dialog="dialog-2" 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>
 
−
    <!-- dialog -->
 
−
    <section>
 
−
        <div id="dialog-1" class="dialog">
 
−
            <div class="dialog__overlay"></div>
 
−
            <div class="dialog__content">
 
−
                <h2>why can't i see me</h2>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Haaaaa</p>
 
−
                <button class="dialogButton">read more</button>
 
−
            </div>
 
−
        </div>
 
−
        <div id="dialog-2" class="dialog">
 
−
            <div class="dialog__overlay"></div>
 
−
            <div class="dialog__content">
 
−
                <h2>why can't i see me</h2>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Howdy guys sadasd dsadsa sdad ad a dsad as d</p>
 
−
                <p>Haaaaa</p>
 
−
                <button class="dialogButton">read more</button>
 
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </section>
 
     </section>
  
 +
    <!--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>
Line 243: Line 211:
 
     <script type="text/javascript"
 
     <script type="text/javascript"
 
         src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/lottie&action=raw&ctype=text/javascript"></script>
 
         src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/lottie&action=raw&ctype=text/javascript"></script>
−
     <script type="text/javascript"
+
     <!--dr-menuSliding-->
−
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/charming&action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript"
+
−
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/anime&action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript"
+
−
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/wordFX&action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript"
+
−
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/modernizr&action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript"
+
−
        src="https://2021.igem.org/wiki/index.php?title=Template:XJTU-China/dialog&action=raw&ctype=text/javascript"></script>
+
−
 
+
−
    <!--viewBtn-->
+
 
     <script>
 
     <script>
−
         var fviewBtn = (function () {
+
         var fsliding = (function () {
 +
            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 drMenuHeight = drMenu.height();
 +
                var headerHeight = $("header").height();
  
−
            var viewBtn = $('.viewBtn');
+
                 if (pageWidth < 992) {
−
            var n = viewBtn.length;
+
                     drMenu.hide();
−
            var animData = new Array(n);
+
−
            var viewAnim = new Array(n);
+
−
            for (i = 0; i < n; i++) {
+
−
                 animData[i] = {
+
−
                    container: viewBtn[i], // the dom element that will contain the animation
+
−
                    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
+
−
                }
+
−
                viewAnim[i] = lottie.loadAnimation(animData[i]);
+
−
                viewAnim[i].setSpeed(1.2);
+
−
            }
+
−
 
+
−
        })();
+
−
    </script>
+
−
    <!--hitLikeBtn&toggle-->
+
−
    <script>
+
−
        var fhitLikeBtn = (function () {
+
−
 
+
−
            var hitLikeBtn = $('.hitLikeBtn');
+
−
            var n = hitLikeBtn.length;
+
−
            var animData = new Array(n);
+
−
            var HitLikeAnim = new Array(n);
+
−
            for (i = 0; i < n; i++) {
+
−
                animData[i] = {
+
−
                    container: hitLikeBtn[i], // the dom element that will contain the animation
+
−
                    renderer: 'svg',
+
−
                    loop: false,
+
−
                    autoplay: false,
+
−
                    path: 'https://static.igem.org/mediawiki/2021/a/a9/T--XJTU-China--hitLikeBtn.txt' // the path to the animation json
+
−
                }
+
−
                HitLikeAnim[i] = lottie.loadAnimation(animData[i]);
+
−
            }
+
−
            hitLikeBtn.click(function () {
+
−
                var index = hitLikeBtn.index(this);
+
−
                var flag = this.classList.toggle('isLike');
+
−
                if (flag) {
+
−
                     HitLikeAnim[index].playSegments([0, 19], true);
+
 
                 }
 
                 }
 
                 else {
 
                 else {
−
                     HitLikeAnim[index].goToAndStop(0, true);
+
                     drMenu.show();
−
                }
+
                    // drmenu到底, -5px莫名其妙
−
            }
+
                    if (scroll - 5 - (0.7 * pageHeight - headerHeight) + drMenuHeight >= containerHeight) {
−
            )
+
                         drMenu.css({
−
 
+
                             "position": "relative",
−
        })();
+
                             "top": (containerHeight - drMenuHeight).toString() + "px"
−
    </script>
+
                        });
−
    <!-- Decorative Letter Animations -->
+
                    }
−
    <script>
+
                    //滑动时，-5px莫名其妙
−
    </script>
+
                    else if (scroll - 5 > 0.7 * pageHeight - headerHeight) {
−
    <!--Hin./ious-->
+
                         drMenu.css({
−
    <script>
+
                             "position": "fixed",
−
        var fLetterAnimation = (function () {
+
                             "top": (headerHeight + 100).toString() + "px"
−
            const effects = [
+
                         });
−
                {
+
                    }
−
                    options: {
+
                    //未滑动时
−
                         shapeColors: ['red', '#000', '#fff'],
+
                    else {
−
                        shapeFill: false,
+
                        drMenu.css({
−
                        shapeStrokeWidth: 10
+
                             "position": "relative",
−
                    },
+
                             "top": "0"
−
                    hide: {
+
                         });
−
                        shapesAnimationOpts: {
+
−
                             duration: 250,
+
−
                             delay: (t, i) => i * 20,
+
−
                            easing: 'easeOutExpo',
+
−
                            translateX: () => [0, anime.random(-200, 200)],
+
−
                            translateY: () => [0, anime.random(-200, 200)],
+
−
                            scale: () => [randomBetween(0.2, 0.6), randomBetween(0.2, 0.6)],
+
−
                            rotate: () => [0, anime.random(-16, 16)],
+
−
                            opacity: [
+
−
                                { value: 1, duration: 1, easing: 'linear', delay: (t, i) => i * 20 },
+
−
                                { value: 0, duration: 150, delay: 100, easing: 'easeOutQuad' }
+
−
                            ]
+
−
                         }
+
−
                    },
+
−
                    show: {
+
−
                        lettersAnimationOpts: {
+
−
                             duration: 400,
+
−
                             delay: (t, i) => i * 60,
+
−
                            easing: 'easeOutExpo',
+
−
                            opacity: {
+
−
                                value: [0, 1],
+
−
                                duration: 100,
+
−
                                easing: 'linear'
+
−
                            },
+
−
                            translateY: (t, i) => i % 2 ? [anime.random(-350, -300), 0] : [anime.random(300, 350), 0]
+
−
                         },
+
−
                        shapesAnimationOpts: {
+
−
                            duration: 500,
+
−
                            delay: (t, i) => i * 30,
+
−
                            easing: 'easeOutExpo',
+
−
                            translateX: () => [0, anime.random(-200, 200)],
+
−
                            translateY: () => [0, anime.random(-200, 200)],
+
−
                            scale: () => [randomBetween(0.2, 0.6), randomBetween(0.2, 0.6)],
+
−
                             rotate: () => [0, anime.random(-16, 16)],
+
−
                             opacity: [
+
−
                                { value: 1, duration: 1, easing: 'linear' },
+
−
                                { value: 0, duration: 350, delay: 150, easing: 'easeOutQuad' }
+
−
                            ]
+
−
                         }
+
 
                     }
 
                     }
 
                 }
 
                 }
−
             ];
+
             })
−
 
+
         })()
−
            class Slideshow {
+
−
                constructor(el) {
+
−
                    this.DOM = {};
+
−
                    this.DOM.el = el;
+
−
                    this.DOM.words = Array.from(this.DOM.el.querySelectorAll('.trigger-headline'));
+
−
                    this.current = 0;
+
−
                    this.words = [];
+
−
                    this.DOM.words.forEach((word, pos) => {
+
−
                        this.words.push(new Word(word, effects[pos].options));
+
−
                    });
+
−
 
+
−
                    this.isAnimating = true;
+
−
                    this.words[this.current].show(effects[this.current].show).then(() => this.isAnimating = false);
+
−
                }
+
−
            }
+
−
 
+
−
            document.querySelector(".banner.bannerHeader").innerText("Hin./ious");
+
−
 
+
−
            const slideshow = new Slideshow(document.querySelector(".banner"));
+
−
 
+
−
         })();
+
−
    </script>
+
−
    <!-- Dialog -->
+
−
    <script>
+
−
        initDialog(2);
+
 
     </script>
 
     </script>
 
</body>
 
</body>

Revision as of 06:37, 6 August 2021

Team:XJTU-China/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