Parallax in the footer

Asked

Viewed 180 times

0

html {
  font-family: Gabriola;
  height: 100%;
}
body {
  height: 100%;
}
#titulo-fotos {
  font-family: Gabriola;
  font-size: 2.5em;
  text-align: center;
  font-weight: bold;
  margin-top: 10%;
}
.linha-galeria {
  width: 40%;
  margin-top: -10px;
}
.textoo {
  line-height: 1;
  margin-left: 100px;
}
.botao-parceria input[type="submit"],
.btn-parceria {
  background-color: transparent;
  color: #000;
  width: 200px;
  height: 50px;
  border: 3px solid #333;
  text-align: center;
  /* margin-left: 190%; */
  border-radius: 6px;
  font-family: Gabriola;
  font-size: 1.7em;
  margin-top: 50px;
}
.botao-parceria input[type="submit"]:hover,
.btn-parceria {
  background-color: #333;
  color: #fff;
  transition: 0.5s;
}
#parceria {
  padding: 0px;
  margin: 0px;
  list-style: none;
  top: 20px;
  left: 28%;
  z-index: 200;
  width: 100%;
  transform: scale(0.9);
}
#parceria ul li {
  display: inline;
}
#parceria ul li a img {
  -webkit-filter: grayscale(100%);
  margin-left: 50px;
}
#parceria ul li a img:hover {
  -webkit-filter: grayscale(0%);
}
#fundo-transparente-parcerias {
  position: absolute;
  left: -15%;
  top: 235%;
  transform: scale(0.7);
  z-index: -200;
}
.icones-parceiros {
  width: 100%;
}
.main-teste {
  position: relative;
  z-index: 2;
  min-height: 800px;
  margin: 0 0 400px;
  background-color: #F0F0F0;
}
#main-footer {
  position: fixed;
  bottom: 0;
  height: 400px;
  width: 100%;
  background-color: #CCC;
  text-align: center;
  z-index: 1;
}
.content-teste {
  position: relative;
  display: block;
  margin: 0;
  padding: 5px 10px;
}
.teste-footer {
  font-size: 22px;
  line-height: 25px;
  padding: 80px 0;
  text-align: center;
}
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Nova Era Team</title>
</head>

<body>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>



  <div class="container testee-geral icones-parceiros main-teste">
    <div class="content-teste">
      <header class="major">
        <h2 id="titulo-fotos">Nossos Parceiros</h2>
      </header>
      <p class="textoo">Lorem ipsum 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.
        <br>
        <br>
        <hr class="linha-galeria">
        <br>
        <img src="images/logo-transp.png" id="fundo-transparente-parcerias">
        <section class="wow fadeInDown">
          <nav id="parceria">
            <ul>
              <li>
                <a href="">
                  <img src="images/parceiros/lvlup.png" alt="" />
                </a>
              </li>
              <li>
                <a href="">
                  <img src="images/parceiros/gamehall.png" alt="" />
                </a>
              </li>
              <li>
                <a href="">
                  <img src="images/parceiros/gamevicio.png" alt="" />
                </a>
              </li>
              <li>
                <a href="">
                  <img src="images/parceiros/triplex.png" alt="" />
                </a>
              </li>
              <li>
                <a href="">
                  <img src="images/parceiros/centralkeys.png" alt="" />
                </a>
              </li>
              <li>
                <a href="">
                  <img src="images/parceiros/gametalk.png" alt="" />
                </a>
              </li>
            </ul>
          </nav>
        </section>
    </div>

    <center>
      <div class="botao-parceria">
        <input type="submit" value="Mais sobre eles..." class="btn-parceria">
      </div>
    </center>
  </div>
  <br>
  <br>
  <br>

  <footer id="main-footer">
    <div class="content">
      <div class="teste-footer">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero officia beatae praesentium accusamus, delectus possimus ea eligendi minima, laudantium amet corrupti quas quae sint sunt, a iure. Quaerat, recusandae, voluptatibus.</p>
      </div>
    </div>
  </footer>

</body>

</html>

I’m having a problem with my Parallax I would like to put the same in my footer but I’m not getting wanted an effect similar to that of this site:

http://www.fatemi.com.br/home/parallax-cidades/

have used Parallax in the rest of my page however I am not getting in the footer.

NOTE: it is not possible to post my entire structure on jsfidle because it is very big my project more just to simulate something of the type I will be able to put in my site.

javascript html5 css3
  • 1

    Can you put in the Jsfiddle to help people..?

  • so I never used it I can put only that the site is great and also depends on my files Avascripts to work would be possible yet yes ultilizar

  • 1

    Kirito, welcome to the site. For the next questions, take a look at on this help page. The ideal is to try to reduce the examples you put to the minimum that reproduces the problem.

  • hello friend edited my post now I believe it became easier to understand.

1 answer

1


It is not so complicated to create this kind of effect, the secret is to use the property z-index of the CSS, then you will place your content at the bottom margin with the same value as the height of your footer, and you will pin the footer to the bottom window.

html {
  font-family: Gabriola;
  height: 100%;
}
body {
  height: 100%;
  margin:0; padding:0;
}
#titulo-fotos {
  font-family: Gabriola;
  font-size: 2.5em;
  text-align: center;
  font-weight: bold;
  margin-top: 10%;
}
.linha-galeria {
  width: 40%;
  margin-top: -10px;
}
.textoo {
  line-height: 1;
  margin-left: 100px;
}
.botao-parceria input[type="submit"],
.btn-parceria {
  background-color: transparent;
  color: #000;
  width: 200px;
  height: 50px;
  border: 3px solid #333;
  text-align: center;
  /* margin-left: 190%; */
  border-radius: 6px;
  font-family: Gabriola;
  font-size: 1.7em;
  margin-top: 50px;
}
.botao-parceria input[type="submit"]:hover,
.btn-parceria {
  background-color: #333;
  color: #fff;
  transition: 0.5s;
}
#parceria {
  padding: 0px;
  margin: 0px;
  list-style: none;
  top: 20px;
  left: 28%;
  z-index: 200;
  width: 100%;
  transform: scale(0.9);
}
#parceria ul li {
  display: inline;
}
#parceria ul li a img {
  -webkit-filter: grayscale(100%);
  margin-left: 50px;
}
#parceria ul li a img:hover {
  -webkit-filter: grayscale(0%);
}
#fundo-transparente-parcerias {
  position: absolute;
  left: -15%;
  top: 235%;
  transform: scale(0.7);
  z-index: -200;
}
.icones-parceiros {
  width: 100%;
}
#main-teste {
  position: relative;
  z-index: 2;
  min-height: 800px;
  margin: 0 0 400px;
  background-color: #F0F0F0;
}
#main-footer {
  position: fixed;
  bottom: 0;
  height: 400px;
  width: 100%;
  background-color: #CCC;
  text-align: center;
  z-index: 1;
}
.content-teste {
  position: relative;
  display: block;
  margin: 0;
  padding: 5px 10px;
}
.teste-footer {
  font-size: 22px;
  line-height: 25px;
  padding: 80px 0;
  text-align: center;
}
<div id="main-teste">
  <div class="content-teste">
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  <p>conteudo-teste</p>
  </div>


  <div class="container testee-geral icones-parceiros main-teste">
    <div class="content-teste">
      <header class="major">
        <h2 id="titulo-fotos">Nossos Parceiros</h2>
      </header>
      <p class="textoo">Lorem ipsum 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.
        <br>
        <br>
        <hr class="linha-galeria">
        <br>
        <img src="images/logo-transp.png" id="fundo-transparente-parcerias">
        <section class="wow fadeInDown">
          <nav id="parceria">
            <ul>
              <li>
                <a href="">
                  <img src="images/parceiros/lvlup.png" alt="" />
                </a>
              </li>
              <li>
                <a href="">
                  <img src="images/parceiros/gamehall.png" alt="" />
                </a>
              </li>
              <li>
                <a href="">
                  <img src="images/parceiros/gamevicio.png" alt="" />
                </a>
              </li>
              <li>
                <a href="">
                  <img src="images/parceiros/triplex.png" alt="" />
                </a>
              </li>
              <li>
                <a href="">
                  <img src="images/parceiros/centralkeys.png" alt="" />
                </a>
              </li>
              <li>
                <a href="">
                  <img src="images/parceiros/gametalk.png" alt="" />
                </a>
              </li>
            </ul>
          </nav>
        </section>
    </div>

    <center>
      <div class="botao-parceria">
        <input type="submit" value="Mais sobre eles..." class="btn-parceria">
      </div>
    </center>
    <br><br>
  </div>
</div>
  <footer id="main-footer">
    <div class="content">
      <div class="teste-footer">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero officia beatae praesentium accusamus, delectus possimus ea eligendi minima, laudantium amet corrupti quas quae sint sunt, a iure. Quaerat, recusandae, voluptatibus.</p>
      </div>
    </div>
  </footer>

Jslink

Keep a close eye on the properties position, because that’s where it goes with the z-index the story is unfolded.

  • 1

    "hmm" friend I’ll test that right now

  • friend tested and did not work I edited my post and put only a snippet of my code where I insert your code and test see what happens I do not know why it happens it fixes the footer but it keeps appearing even if I put a z-index:-99999;

  • @Kirito, you have to separate all the content of the site from the footer, you let loose there, where is the div with the id #main-teste?

  • @Kirito, I edited the answer notice that the divs #main-teste and .content-teste is separating the content of the website from the footer. The secret is not the z-index of footer rather that of the #main-teste.

  • thank you very much friend helped me out more

  • ola amigo remembers min am I again "rs" I just opened a post again with this problem I had with the footer only that on another page that I am developing but I looked again at your answer and it is not working on this page could you take a look : http://answall.com/questions/62760/rodap%C3%A9-n%C3%A3o-fica-escondido-o-conte%C3%Bado-da-p%C3%A1gina

Show 1 more comment

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.