Allen850413 (Talk | contribs) |
Allen850413 (Talk | contribs) |
||
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
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////