Difference between revisions of "Template:CCU Taiwan"

Line 2: Line 2:
 
<script>
 
<script>
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
−
$(document).ready(function(){
+
  if($(window).scrollTop())
−
$('#wrapper').fullpage();
+
{
 +
    $('.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 + "%";
 +
}
 +
 
 +
$(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
 +
  });
 
});
 
});
 +
 +
$(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>
 
</script>
Line 73: Line 133:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 +
.container {
 +
position: fixed;
 +
width: 100%;
 +
margin: 0 auto;
 +
background: #000000;
 +
height: 55px;
 +
        padding-top:10px;
 +
}
 +
nav {
 +
        margin-top:0;
 +
height: 55px;
 +
}
 +
nav ul {
 +
  margin: 0;
 +
  list-style: none;
 +
  padding-top: 5px;
 +
}
 +
nav ul li {
 +
  display: inline-block;
 +
  margin-left: 130px;
 +
  padding-top: 5px;
 +
  position: relative;
 +
}
 +
nav ul li ul{
 +
position:absolute;
 +
background: #000000;
 +
clear:left;
 +
        margin-right:20px;
 +
life-style: none;
 +
padding-top:20px;
 +
padding-left:0px;
 +
width:140px;
 +
        border-radius: 5px;
 +
}
 +
nav ul li ul li{
 +
margin-left: 0;
 +
position: relative;
 +
text-align: center;
 +
float:none;
 +
display: none;
 +
        padding-top:20px;
 +
padding-left:5px;
 +
padding-bottom:10px;
 +
}
 +
nav a {
 +
  color:#FFFFFF;
 +
  font-family: monospace;
 +
  font-size: 25px;
 +
  text-decoration: none;
 +
}
 +
nav a::before {
 +
  content: '';
 +
  display: block;
 +
  height: 3px;
 +
  background-color: blue;
 +
 +
  position: absolute;
 +
  top: 0;
 +
  width: 0%;
 +
  transition: all ease-in-out 400ms;
 +
}
 +
nav a:hover {
 +
  color: #000000;
 +
  background: #F5F5F5;
 +
  transition: 300ms;
 +
  border-radius: 2px;
 +
}
 +
nav a:hover::before {
 +
  width: 100%;
 +
}
 +
nav ul li:hover ul li{
 +
display: block;
 +
}
 +
.parallax {
 +
    background-image: url("https://orig00.deviantart.net/04aa/f/2014/323/0/a/forest_gif__by_sharandula-d86yqnf.gif");
 +
    height: 600px;
 +
    background-attachment: fixed;
 +
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
    z-index: 1;
 +
    margin-bottom:-90px;
 +
}
 +
.scroll-down {
 +
  background: none;
 +
}
 +
.scroll a:hover {
 +
  opacity: .5;
 +
  position: absolute;
 +
}
 +
.a {
 +
  background: transparent;
 +
}
 +
.scroll-down {
 +
 
 +
opacity: 1;
 +
 
 +
-webkit-transition: all .5s ease-in 3s;
 +
 
 +
transition: all .5s ease-in 3s;
 +
 +
}
 +
.scroll-down {
 +
 
 +
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: -50px;
 +
}
 +
 +
@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);
 +
 
 +
}
 +
 +
}
 +
.under {
 +
    position: relative;
 +
    background: black;
 +
    z-index: -2;
 +
    padding-bottom: 200px;
 +
    margin-bottom: 0px;
 +
}
 +
.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: 0px;
 +
  background: white;
 +
  width: 100%;
 +
  margin-left: 28px;
 +
  z-index: -1;
 +
}
 +
.cup{
 +
  position: fixed;
 +
  width: 20%;
 +
  height:100vh;
 +
  top: 150px;
 +
  -webkit-clip-path:polygon(-20% -20%,10% 0%,10% 50%, 50% 50%, 50% 0% , 60% 0% , 60% 60%, 0% 60%);
 +
  background:#AAAAAA;
 +
  z-index: -1;
 +
  margin-left: 50px;
 +
}
 +
.content {
 +
  margin:0;
 +
  padding: 60px 0;
 +
  width: 60%;
 +
  margin-left: 400px;
 +
}
 +
.first {
 +
  font-size: 50px;
 +
  font-family: "Arial Black", Gadget, sans-serif;
 +
  color: #e5e5e5;
 +
}
 +
.second {
 +
  font-size: 30px;
 +
  font-family: Arial, Helvetica, sans-serif;
 +
  color: #f9f9f9;
 +
}
 +
.description {
 +
  font-size: 20px;
 +
  font-family: Arial, Helvetica, sans-serif;
 +
  color: #f9f9f9;
 +
}
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/

Revision as of 03:15, 12 July 2018