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!