I need the footer hidden and appear as I scroll the page, but something is going wrong I do not know why. In this link is the example of how it should work.
Follow my code:
a {
text-decoration: none;
}
ul li {
list-style-type: none;
}
.text-center {
text-align: center !important;
}
.menu {
text-align: center;
}
.menu li {
display: inline;
}
.menu li a {
margin: 10px;
color: #fff;
font-family: Gabriola;
font-size: 1.5em;
}
.menu li a:hover {
color: #f80;
}
.seta-menu {
margin-top: 3%;
}
#texto-header {
margin-top: 20%;
}
header h1 {
color: #fff;
text-align: center;
font-family: Gabriola;
font-size: 5em;
}
header strong {
color: #f80;
}
header p {
color: #fff;
text-align: center;
font-family: gabriola;
font-size: 1.2em;
margin-top: -3%;
}
.botao-circulo {
background: transparent;
width: 50px;
height: 50px;
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
border-radius: 50px;
border: 1px solid #fff;
position: absolute;
margin-top: 10%;
}
.botao-circulo:hover {
background: rgba(255, 255, 255, 0.06);
}
.botao-circulo img {
-webkit-transform: scale(0.2);
-o-transform: scale(0.2);
-ms-transform: scale(0.2);
-moz-transform: scale(0.2);
transform: scale(0.2);
margin-left: -42px;
margin-top: -17px;
}
#video {
width: 100%;
height: 100%;
}
video {
height: 100%;
width: 100%;
z-index: -100;
position: absolute;
top: 0;
left: 0;
-webkit-transform: scaley(1.72);
-o-transform: scaley(1.72);
-ms-transform: scaley(1.72);
-moz-transform: scaley(1.72);
transform: scaley(1.72);
}
#bg-video {
position: absolute;
top: 0;
left: 0;
z-index: -50;
width: 100%;
height: 100%;
opacity: 0.55;
}
#main-teste {
position: relative;
z-index: 2;
min-height: 80%;
margin: 0 0 600px;
background-color: #fff;
}
#main-footer {
position: fixed;
bottom: 0;
height: 70%;
width: 100%;
background-size: 100% 100%;
background-color: aquamarine;
}
.content-teste {
position: relative;
display: block;
margin: 0;
}
<div id="main-teste">
<div class="content-teste">
<header>
<ul class="menu">
<li><a href="">Home</a>
</li>
<li><a href="">Sobre</a>
</li>
<li><a href="">Games</a>
</li>
<li><a href="">Eventos</a>
</li>
<li><a href="">Team</a>
</li>
<li><a href="">Contato</a>
</li>
<li><a href="">Ajuda</a>
</li>
<li><a href="">Forum</a>
</li>
</ul>
<img src="http://tapproom.com/testing/tapp/bg.png"id="bg-video">
<div id="video">
<video id="Video1" width="100%" height="100%" loop>
<source src="video/League-warrios.mp4" type="video/mp4" />
</video>
</div>
<div id="texto-header">
<h1>Lorem Ipsum <strong>Dolor</strong></h1>
<p>dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
<br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.</p>
</div>
</header>
<div>
<div>
<footer id="main-footer">
</footer>