0

Website

Hey Nx o/
Website looks great and all, but the animations in the header can be hard on the cpu for lesser computers. Perhaps have a loop or just a static.

Also, having a fixed ( header { position: fixed; } ) header that shrinks on scroll might look nice.
For example:

<div id="header">
<a href="https://www.extremecraft.net/" <img border="0" src="extremecraftLogo.png"
<div>


<style> /*CSS..*/
#header {
/*background font padding margin formatting that nobody likes*/
position: fixed; /*div remains in the same place on display when scrolling.*/
transition: 0.3s; /*Much smoother and nicer look*/
}
</style>

<script> //JS

window.onscroll = function() {scroll()}; //when the user scrolls..

function scroll() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { /*change will take effect 50px from top of page*/
document.querySelectorAll("header, a").style.width = '100px'; //This takes effect after user scrolls
} else {
document.querySelectorAll("header, a").style.width = "200px"; //Before user scrolls
}
}
</script>

Could also remove/move extremecraft IP from under the logo on scroll. Lots of potential!
I enjoy HTML/CSS/JS just let me know if you want help with anything!

#3351 - Status: closed

5 years ago by mandown3120O for Website

Answer: Closed

Website changed, the header is not animated anymore

4 years ago by NxDs