RedXen/Homepage
RedXen
/
Homepage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Tweaked stuff around

This commit is contained in:
Alex D. 2018-06-13 19:12:17 +02:00
parent 9b299894df
commit 09b037a5c7
3 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -35,9 +35,10 @@
<img id="logobig" src="res/logo.png" alt="logo">
<h1>RedXen Gaming</h1>
</div>
<div class="header" id="myHeader">
<div class="header" id="pgHeader">
<span id="logo-header">
<img src="res/logo.png" alt="logo">
<div><a href="https://redxen.eu"><img src="res/logo.png" alt="logo"></a></div>
<div class="header-title">RedXen Gaming</div>
</span>
<span id="links-header">
<a href="https://forum.redxen.eu">Forum</a>

5
res/header.js
View File

@ -1,10 +1,11 @@
window.onscroll = function() {checkheader()};
// Get the header
var header = document.getElementById("myHeader");
var header = document.getElementById("pgHeader");
var banner = document.getElementById("text");
// Get the offset position of the navbar
var sticky = header.offsetTop;
var sticky = banner.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function checkheader() {

32
res/web.css
View File

@ -10,19 +10,35 @@ html {
height: 50px;
width: 100%;
left: 0;
background-color: rgba(30, 30, 30, 0.4);
background-color: rgba(0, 0, 0, 0);
z-index: 20;
display: flex;
position: absolute;
overflow: hidden;
transition: ease-out 1s;
}
.header-title {
width: 100%;
line-height: 50px;
font-size: 25px;
color: #fff;
display: flex;
height: 50px;
flex-wrap: nowrap;
}
#logo-header {
display: none;
opacity: 0;
}
.sticky > #logo-header {
opacity: 1;
display: flex;
}
.sticky {
position: fixed;
background-color: rgba(10, 10, 10, 0.4);
background-color: rgba(10, 10, 10, 0.7);
top: 0;
}
.sticky + .content {
padding-top: 50px;
}
#logo-header img {
display: flex;
height: 40px;
@ -66,7 +82,7 @@ html {
color: #fff;
overflow: hidden;
font-size: 40px;
transition: ease-in-out 0.2s;
transition: ease-in-out 0.7s;
/*Flexbox content*/
justify-content: center;
@ -82,7 +98,7 @@ html {
#banner img {
width: 220px;
filter: drop-shadow(-5px 6px 3px rgba(0,0,0,.7));
transition: ease-in-out 0.2s;
transition: ease-in-out 0.7s;
}
#text {
display: flex;
@ -101,7 +117,7 @@ html {
font-size: 60px;
line-height: 100px;
background-color: rgba(10, 10, 10, 0.4);
transition: ease-in-out 0.2s;
transition: ease-in-out 0.5s;
}