Difference between revisions of "Team:LINKS China/Communication"

Line 170: Line 170:
  
 
<div id="big_header">
 
<div id="big_header">
−
     <img src="https://static.igem.org/mediawiki/2021/1/14/T--LINKS_China--bigheader_communication.jpg" style="position: absolute; top: 17vw; left: 22vw; width: 56vw;">
+
     <img src="https://static.igem.org/mediawiki/2021/f/f2/T--LINKS_China--bigimg_communication.png" style="position: absolute; top: 17vw; left: 22vw; width: 56vw;">
−
     <img src="https://static.igem.org/mediawiki/2021/0/0f/T--LINKS_China--descriptionplace_lightpurple.jpg" style="position: absolute; top:12vw; left: 22.5vw; width: 55vw;">
+
     <img src="https://static.igem.org/mediawiki/2021/f/fa/T--LINKS_China--descriptionplace_darkpurple.jpg" style="position: absolute; top:12vw; left: 22.5vw; width: 55vw;">
 
</div>
 
</div>
  
Line 424: Line 424:
 
@media only screen and (min-device-width: 768px) {
 
@media only screen and (min-device-width: 768px) {
 
#sidebar_and_texts {
 
#sidebar_and_texts {
−
  display: grid;
 
−
  grid-template-columns: 0.27fr 1.63fr;
 
−
  gap: 0px 0px;
 
−
  align-items: baseline;
 
 
}
 
}
  
Line 526: Line 522:
 
@media only screen and (max-device-width: 768px) {
 
@media only screen and (max-device-width: 768px) {
 
#sidebar_and_texts {
 
#sidebar_and_texts {
−
  display: grid;
 
−
  grid-template-columns: 0.31fr 1.59fr;
 
−
  gap: 0px 0px;
 
−
  align-items: baseline;
 
 
}
 
}
  
 
#sidebar {
 
#sidebar {
−
   display: block;
+
   display: none;
 
   border: 0px solid #600136;
 
   border: 0px solid #600136;
 
}
 
}
Line 574: Line 566:
  
 
.section-nav{
 
.section-nav{
−
   display: block;
+
   display: none;
 
   background-color: #FFFFFF;
 
   background-color: #FFFFFF;
 
}
 
}
Line 638: Line 630:
 
       letter-spacing: 0.6px;
 
       letter-spacing: 0.6px;
 
       text-shadow: 2px 2px 5px #C0C0C0;
 
       text-shadow: 2px 2px 5px #C0C0C0;
 +
      margin-left: 4.5vw;
 +
      margin-right: 4.5vw;
 
}
 
}
  
Line 656: Line 650:
 
       border-radius: 24px;
 
       border-radius: 24px;
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
−
       margin-left: 0.3vw;
+
       margin-left: 4.5vw;
−
       margin-right: 3vw;
+
       margin-right: 4.5vw;
 
}
 
}
  
Line 765: Line 759:
 
       border-radius: 24px;
 
       border-radius: 24px;
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
−
       margin-left: 0.3vw;
+
       margin-left: 4.5vw;
−
       margin-right: 3vw;
+
       margin-right: 4.5vw;
 
       font-family: "LatoLight";
 
       font-family: "LatoLight";
 
}
 
}
Line 781: Line 775:
 
       font-family: "LatoLight";
 
       font-family: "LatoLight";
 
}
 
}
 +
 +
 +
 +
#show_on_click1, #show_on_click2, #show_on_click3, #show_on_click4, #show_on_click5{
 +
      display:none;
 +
      transition: all 0.5s !important;
 +
}
 +
 +
.show{
 +
      display:block !important;
 +
      transition: all 0.5s !important;
 +
}
 +
 +
 +
.show_buttons{
 +
    color: grey;
 +
    font-family: "Lato";
 +
    cursor: pointer;
 +
    border: none;
 +
    font-size: 1.5vw;
 +
}
 +
 +
 +
  
  
Line 786: Line 804:
 
/*--------------------------------------MAIN BACKGROUND------------------------------------------*/
 
/*--------------------------------------MAIN BACKGROUND------------------------------------------*/
 
#main_content{
 
#main_content{
−
       background-image: url(https://static.igem.org/mediawiki/2021/2/22/T--LINKS_China--background_lightpurple.png);
+
       background-image: url(https://static.igem.org/mediawiki/2021/e/e8/T--LINKS_China--background_darkpurple.png);
 
       background-attachment:scroll;
 
       background-attachment:scroll;
 
       background-repeat: repeat;
 
       background-repeat: repeat;
Line 945: Line 963:
 
   z-index: 100;
 
   z-index: 100;
 
   transition: top 0.3s; /* Transition effect when sliding down (and up) */
 
   transition: top 0.3s; /* Transition effect when sliding down (and up) */
 +
  top:-100px;
 
}
 
}
  
Line 1,028: Line 1,047:
  
  
−
<!----------------------------SIDEBAR_EFFECT--------------------------->
 
 
<script>
 
<script>
−
$(document).ready( function() {
 
−
 
−
    $("#section1_guider").hover( function() {
 
−
        $("#section1_header").animate({opacity: 1}, 350);
 
−
    }, function() {
 
−
        $("#section1_header").animate({opacity: 0}, 150);
 
−
    });
 
−
 
−
 
−
    $("#section2_guider").hover( function() {
 
−
        $("#section2_header").animate({opacity: 1}, 350);
 
−
    }, function() {
 
−
        $("#section2_header").animate({opacity: 0}, 150);
 
−
    });
 
−
 
−
 
−
 
−
    $("#section3_guider").hover( function() {
 
−
        $("#section3_header").animate({opacity: 1}, 350);
 
−
    }, function() {
 
−
        $("#section3_header").animate({opacity: 0}, 150);
 
−
    });
 
−
 
−
 
−
    $("#section4_guider").hover( function() {
 
−
        $("#section4_header").animate({opacity: 1}, 350);
 
−
    }, function() {
 
−
        $("#section4_header").animate({opacity: 0}, 150);
 
−
    });
 
−
 
−
    $("#section5_guider").hover( function() {
 
−
        $("#section5_header").animate({opacity: 1}, 350);
 
−
    }, function() {
 
−
        $("#section5_header").animate({opacity: 0}, 150);
 
−
    });
 
−
 
−
    $("#section6_guider").hover( function() {
 
−
        $("#section6_header").animate({opacity: 1}, 350);
 
−
    }, function() {
 
−
        $("#section6_header").animate({opacity: 0}, 150);
 
−
    });
 
−
 
−
    $("#section7_guider").hover( function() {
 
−
        $("#section7_header").animate({opacity: 1}, 350);
 
−
    }, function() {
 
−
        $("#section7_header").animate({opacity: 0}, 150);
 
−
    });
 
−
    $("#section8_guider").hover( function() {
 
−
        $("#section8_header").animate({opacity: 1}, 350);
 
−
    }, function() {
 
−
        $("#section8_header").animate({opacity: 0}, 150);
 
−
    });
 
−
 
−
 
−
 
−
 
−
});
 
−
 
−
<!----------------------------NAVBAR_EFFECT--------------------------->
 
 
var prevScrollpos = window.pageYOffset;
 
var prevScrollpos = window.pageYOffset;
 
window.onscroll = function() {
 
window.onscroll = function() {
Line 1,094: Line 1,053:
 
   if (prevScrollpos > currentScrollPos) {
 
   if (prevScrollpos > currentScrollPos) {
 
     document.getElementById("outnav").style.top = "17px";
 
     document.getElementById("outnav").style.top = "17px";
−
    document.getElementById("sidebar").style.top = "9.7vw";
 
 
   } else {
 
   } else {
 
     document.getElementById("outnav").style.top = "-100px";
 
     document.getElementById("outnav").style.top = "-100px";
−
    document.getElementById("sidebar").style.top = "5vw";
 
 
   }
 
   }
 
   prevScrollpos = currentScrollPos;
 
   prevScrollpos = currentScrollPos;
Line 1,105: Line 1,062:
  
  
 +
function myFunction1() {
 +
  var element = document.getElementById("show_on_click1");
 +
  element.classList.toggle("show");
 +
}
  
 +
function myFunction2() {
 +
  var element = document.getElementById("show_on_click2");
 +
  element.classList.toggle("show");
 +
}
  
−
window.addEventListener('DOMContentLoaded', () => {
+
function myFunction3() {
 +
  var element = document.getElementById("show_on_click3");
 +
  element.classList.toggle("show");
 +
}
  
−
  const observer = new IntersectionObserver(entries => {
+
function myFunction4() {
−
    entries.forEach(entry => {
+
  var element = document.getElementById("show_on_click4");
−
      const id = entry.target.getAttribute('id');
+
  element.classList.toggle("show");
−
      if (entry.intersectionRatio > 0) {
+
}
−
        document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
+
 
−
      } else {
+
function myFunction5() {
−
        document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
+
  var element = document.getElementById("show_on_click5");
−
      }
+
  element.classList.toggle("show");
−
    });
+
}
−
  });
+
  
−
  // Track all sections that have an `id` applied
 
−
  document.querySelectorAll('section[id]').forEach((section) => {
 
−
    observer.observe(section);
 
−
  });
 
−
 
 
−
});
 
 
</script>
 
</script>
 +
 
</html>
 
</html>

Revision as of 00:17, 22 October 2021