Difference between revisions of "Template:CCU Taiwan"

Line 40: Line 40:
 
}
 
}
 
}
 
}
 +
$(window).on('scroll',function() {
 +
  if($(window).scrollTop())
 +
{
 +
    $('.container').css('background', '#808080');
 +
$('nav ul li ul').css('background', '#808080');
 +
$('nav').css('opacity','1');
 +
    }
 +
    else
 +
{
 +
$('.container').css('background', '#000000');
 +
$('nav ul li ul').css('background', '#000000');
 +
$('nav').css('opacity','1');
 +
    }
 +
  });
 +
// When the user scrolls the page, execute myFunction
 +
window.onscroll = function() {myFunction()};
  
 +
function myFunction() {
 +
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
 +
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
 +
  var scrolled = (winScroll / height) * 100;
 +
  document.getElementById("myBar").style.height = scrolled + "%";
 +
}
 +
 +
    </script>
 +
 +
    <script>
 +
$(document).ready(function(){
 +
  // Add smooth scrolling to all links
 +
  $("a").on('click', function(event) {
 +
 +
    // Make sure this.hash has a value before overriding default behavior
 +
    if (this.hash !== "") {
 +
      // Prevent default anchor click behavior
 +
      event.preventDefault();
 +
 +
      // Store hash
 +
      var hash = this.hash;
 +
 +
      // Using jQuery's animate() method to add smooth page scroll
 +
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
 +
      $('html, body').animate({
 +
        scrollTop: $(hash).offset().top
 +
      }, 800, function(){
 +
 
 +
        // Add hash (#) to URL when done scrolling (default click behavior)
 +
        window.location.hash = hash;
 +
      });
 +
    } // End if
 +
  });
 +
});
 +
 +
    </script>
 +
<script>
 +
$(window).on('scroll',function() {
 +
  if($(window).scrollTop())
 +
{
 +
    $('.container').css('background', '#808080');
 +
$('nav ul li ul').css('background', '#808080');
 +
$('nav').css('opacity','1');
 +
    }
 +
    else
 +
{
 +
$('.container').css('background', '#000000');
 +
$('nav ul li ul').css('background', '#000000');
 +
$('nav').css('opacity','1');
 +
    }
 +
  });
 +
  </script>
  
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Line 174: Line 242:
 
nav ul li:hover ul li{
 
nav ul li:hover ul li{
 
display: block;
 
display: block;
 +
}
 +
.under {
 +
    position: relative;
 +
    background-color: #000000;
 +
    z-index: -2;
 
}
 
}
  
 +
.header h2 {
 +
  text-align: center;
 +
}
 +
 +
.first {
 +
  font-size: 130%;
 +
  font-family: "Arial Black", Gadget, sans-serif;
 +
  color: #e5e5e5;
 +
}
 +
 +
.second {
 +
  font-size: 90%;
 +
  font-family: Arial, Helvetica, sans-serif;
 +
  color: #f9f9f9;
 +
 +
}
 +
.description {
 +
  font-size: 70%;
 +
  font-family: Arial, Helvetica, sans-serif;
 +
  color: #f9f9f9;
 +
}
 +
 +
.progress-container {
 +
  position: fixed;
 +
  width: 10%;
 +
  height: 50vh;
 +
  top: 150px;
 +
  background-image:url("https://i.imgur.com/oxkrzAb.png");
 +
  margin-left: 51px;
 +
  z-index: -1;
 +
}
 +
 +
.progress-bar {
 +
  height: 0;
 +
  background: black;
 +
  width: 100%;
 +
  margin-left: 28px;
 +
  z-index: -1;
 +
}
 +
 +
.cup{
 +
  position: fixed;
 +
  width: 20%;
 +
  height:100vh;
 +
  top: 150px;
 +
  -webkit-clip-path:polygon(0% 0%,10% 0%,10% 50%, 50% 50%, 50% 0% , 60% 0% , 60% 60%, 0% 60%);
 +
  background:#AAAAAA;
 +
  z-index: -1;
 +
  margin-left: 50px;
 +
}
 +
 +
.bubble {
 +
  position: fixed;
 +
  width: 20%;
 +
  margin-left: 50px;
 +
  z-index: -1;
 +
}
 +
 +
.scrolldown {
 +
  background: none;
 +
}
 +
 +
.scroll a:hover {
 +
  opacity: .5;
 +
}
 +
 +
.a {
 +
  background: transparent;
 +
}
 +
 +
.content {
 +
  margin:0;
 +
  padding: 60px 0;
 +
  width: 50%;
 +
  margin-left: 500px;
 +
}
 +
 +
.scroll-down {
 +
 
 +
opacity: 1;
 +
 
 +
-webkit-transition: all .5s ease-in 3s;
 +
 
 +
transition: all .5s ease-in 3s;
 +
 +
}
 +
 +
 +
 +
.scroll-down {
 +
 
 +
position: absolute;
 +
 
 +
bottom: 20px;
 +
 
 +
left: 50%;
 +
 +
margin-left: -24px;
 +
 +
z-index: 2;
 +
 
 +
-webkit-animation: bounce 2s infinite 2s;
 +
 
 +
animation: bounce 2s infinite 2s;
 +
 
 +
-webkit-transition: all .2s ease-in;
 +
 
 +
transition: all .2s ease-in;
 +
 +
}
 +
 +
 +
 +
.scroll-down: before {
 +
   
 +
position: absolute;
 +
   
 +
top: calc(50% - 8px);
 +
   
 +
left: calc(50% - 6px);
 +
   
 +
transform: rotate(-45deg);
 +
   
 +
display: block;
 +
   
 +
width: 12px;
 +
   
 +
height: 12px;
 +
   
 +
content: "";
 +
   
 +
border: 2px solid white;
 +
   
 +
border-width: 0px 0 2px 2px;
 +
 +
}
 +
 +
 +
.scroll-down {
 +
  margin-top: -10px;
 +
 +
}
 +
 +
@keyframes bounce {
 +
 
 +
0%,
 +
 
 +
100%,
 +
 
 +
20%,
 +
 
 +
50%,
 +
 
 +
80% {
 +
   
 +
  -webkit-transform: translateY(0);
 +
   
 +
  -ms-transform: translateY(0);
 +
   
 +
  transform: translateY(0);
 +
 +
}
 +
 +
 +
40% {
 +
   
 +
-webkit-transform: translateY(-10px);
 +
   
 +
-ms-transform: translateY(-10px);
 +
   
 +
transform: translateY(-10px);
 +
 
 +
}
 +
 
 +
60% {
 +
   
 +
-webkit-transform: translateY(-5px);
 +
   
 +
-ms-transform: translateY(-5px);
 +
   
 +
transform: translateY(-5px);
 +
 
 +
}
 +
 +
}
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 
</style>
 
</style>

Revision as of 04:08, 11 July 2018

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////