Difference between revisions of "Template:XJTU-China/header"

 
(53 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<section class="d-flex flex-column">
 
<section class="d-flex flex-column">
 +
    <div class="logoHolder">
 +
        <a href="/Team:XJTU-China" class="logo"></a>
 +
    </div>
 
     <header class="header_area" id="topHeader">
 
     <header class="header_area" id="topHeader">
−
            <span class="lottie logoMoving"></span>
+
        <div class="spacer"></div>
 
         <nav class="navbar navbar-expand-lg navbar-light">
 
         <nav class="navbar navbar-expand-lg navbar-light">
 
             <div class="container">
 
             <div class="container">
Line 14: Line 17:
 
                 <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
 
                 <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
 
                     <ul class="nav navbar-nav menu_nav ml-auto">
 
                     <ul class="nav navbar-nav menu_nav ml-auto">
−
                         <li class="nav-item active"><a class="nav-link" href="/Team:XJTU-China">home</a></li>
+
                         <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China">home</a></li>
 
                         <li class="nav-item submenu dropdown">
 
                         <li class="nav-item submenu dropdown">
 
                             <a href="/Team:XJTU-China/Description" class="nav-link dropdown-toggle"
 
                             <a href="/Team:XJTU-China/Description" class="nav-link dropdown-toggle"
Line 26: Line 29:
 
                                     <a class="nav-link" href="/Team:XJTU-China/Design">design</a>
 
                                     <a class="nav-link" href="/Team:XJTU-China/Design">design</a>
 
                                 </li>
 
                                 </li>
−
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Parts">parts</a></li>
+
                                <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Implementation">implementation</a></li>
 +
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Parts">parts</a>
 +
                                </li>
 
                             </ul>
 
                             </ul>
 
                         </li>
 
                         </li>
Line 34: Line 40:
 
                                     aria-hidden="true"></span></a>
 
                                     aria-hidden="true"></span></a>
 
                             <ul class="dropdown-menu">
 
                             <ul class="dropdown-menu">
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">engineering</a></li>
+
                                 <li class="nav-item"><a class="nav-link"
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">lab note</a></li>
+
                                        href="/Team:XJTU-China/Engineering">engineering</a></li>
 +
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Improve">improvement</a>
 +
                                </li>
 +
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Proof_Of_Concept"
 +
                                        style="font-size: 0.9em;">Proof
 +
                                        of Concept</a>
 +
                                </li>
 +
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Protocols">protocols</a>
 +
                                </li>
 
                             </ul>
 
                             </ul>
 
                         </li>
 
                         </li>
Line 43: Line 57:
 
                                     aria-hidden="true"></span></a>
 
                                     aria-hidden="true"></span></a>
 
                             <ul class="dropdown-menu">
 
                             <ul class="dropdown-menu">
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">modeling</a></li>
+
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Model">modelling</a></li>
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">simulation</a></li>
+
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/protein_model"
 +
                                        style="font-size: 0.9em;">protein modelling</a></li>
 +
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Hardware">hardware</a>
 +
                                </li>
 
                             </ul>
 
                             </ul>
 
                         </li>
 
                         </li>
−
                        <li class="nav-item"><a class="nav-link" href="contact.html">parts</a></li>
 
 
                         <li class="nav-item submenu dropdown">
 
                         <li class="nav-item submenu dropdown">
 
                             <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
 
                             <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
Line 53: Line 69:
 
                                     class="fa fa-caret-down" aria-hidden="true"></span></a>
 
                                     class="fa fa-caret-down" aria-hidden="true"></span></a>
 
                             <ul class="dropdown-menu">
 
                             <ul class="dropdown-menu">
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">explore</a></li>
+
                                 <li class="nav-item"><a class="nav-link"
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">interview</a></li>
+
                                        href="/Team:XJTU-China/Human_Practices">overview</a></li>
 +
                                 <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Human_Practices#inspiration">interview</a></li>
 +
                                <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Human_Practices#point_6">visit</a></li>
 +
                                <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Human_Practices#point_7">survey</a></li>
 +
                                <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Communication">Communication</a>
 +
                                </li>
 +
                                <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Education">Education</a>
 +
                                </li>
 
                             </ul>
 
                             </ul>
 
                         </li>
 
                         </li>
Line 62: Line 89:
 
                                     aria-hidden="true"></span></a>
 
                                     aria-hidden="true"></span></a>
 
                             <ul class="dropdown-menu">
 
                             <ul class="dropdown-menu">
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">crew</a></li>
+
                                 <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Team">crew</a></li>
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">attibutions</a></li>
+
                                 <li class="nav-item"><a class="nav-link"
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">collaboration</a></li>
+
                                        href="/Team:XJTU-China/Attributions">attributions</a></li>
−
                                 <li class="nav-item"><a class="nav-link" href="ieee.html">partners</a></li>
+
                                 <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Contribution">contribution</a></li>
 +
                                <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Collaborations">collaboration</a></li>
 +
                                 <li class="nav-item"><a class="nav-link"
 +
                                        href="/Team:XJTU-China/Partnership">partnership</a></li>
 
                             </ul>
 
                             </ul>
 
                         </li>
 
                         </li>
Line 75: Line 107:
 
</section>
 
</section>
  
−
<script type="text/javascript"
+
<!--movingLogo-->
−
    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>
+
−
<!--smoothNav-->
+
 
<script>
 
<script>
−
     window.addEventListener('scroll', () => {
+
     var logo = $('.logo');
−
        var h = document.getElementById('topHeader');
+
−
        height = h.clientHeight;
+
−
        let header = document.querySelector('header');
+
−
        let logo = document.querySelector('.logo');
+
−
        header.classList.toggle('sticky', window.scrollY > height);
+
−
        logo.classList.toggle('sticky', window.scrollY > height);
+
−
    })
+
−
</script>
+
−
<!--logoMoving-->
+
−
<script>
+
−
    var logo = $(".logoMoving");
+
 
     var animData = {
 
     var animData = {
−
         container: logo, // the dom element that will contain the animation
+
         container: logo[0], // the dom element that will contain the animation
 
         renderer: 'svg',
 
         renderer: 'svg',
 
         loop: true,
 
         loop: true,
−
         autoplay: true,
+
         autoplay: false,
 
         path: 'https://static.igem.org/mediawiki/2021/c/c5/T--XJTU-China--logoMoving.txt' // the path to the animation json
 
         path: 'https://static.igem.org/mediawiki/2021/c/c5/T--XJTU-China--logoMoving.txt' // the path to the animation json
 
     }
 
     }
−
     var animation = lottie.loadAnimation(animData);
+
     var logoAnim = lottie.loadAnimation(animData);
 +
    logoAnim.setSpeed(1.5);
 +
    $(logo).hover(function () { logoAnim.play(); },
 +
        function () { logoAnim.pause(); })
 +
</script>
 +
<!--headerTransition-->
 +
<script>
 +
    window.addEventListener('scroll', () => {
 +
        var h = document.getElementById('topHeader');
 +
        height = h.clientHeight;
 +
        let header = document.querySelector('header');
 +
        let logoHolder = document.querySelector('.logoHolder');
 +
        let menuBtn = document.querySelector('.navbar-toggler');
 +
        header.classList.toggle('sticky', window.scrollY > height);
 +
        logoHolder.classList.toggle('sticky', window.scrollY > height);
 +
        menuBtn.classList.toggle('sticky', window.scrollY > height);
 +
    });
 +
 
 
</script>
 
</script>
  
 
</html>
 
</html>

Latest revision as of 20:49, 21 October 2021