Parallax in the footer

Question

Parallax in the footer

Navigation

#1 by (1 votes)

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 have a problem with my parallax I would like to put the same in my footer but I am not getting wanted an effect similar to that of this site:

link

I've already used Parallax in the rest of my page but I'm not getting it in the footer.

javascript html5 css3

asked by anonymous 29.04.2015 / 14:01

1 answer

How to generate thumbnails of a bitmap using AsyncTask? Problems with Error '9': subscript out of range

score 1 · Accepted Answer

It's not so complicated to create this kind of effect, the secret is to use the z-index property of CSS, so you'll put your content with the bottom margin with the same height value as your footer, and it will fix the footer in%% of the 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

Be very aware of the properties bottom , because it is there that combined with position the story unfolds.