1

Eu tenho estado a estudar parallax, com ideias de usar em projectos futuros porém tenho um problema que me deixou encravado.

Deixo em baixo o meu exemplo teste:

body, html {
    height: 100%;
}

.parallax {
    /* The image used */
    background-image: url('http://vwgolftuning.com/wp-content/uploads/2013/11/orangerabbit-mk1-golf.jpg');

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax2 {
    /* The image used */
    background-image: url('http://wallup.net/wp-content/uploads/2016/01/137273-Volkswagen-golf_I-Golf_1.jpg');

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

.parallax3 {
    /* The image used */
    background-image: url('http://s1.1zoom.me/big3/486/356925-Berserker.jpg');

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

.text{
 text-align: center;
vertical-align: middle;
}
<div class="parallax"></div>

<div class="text" style="height:350px;background-color:red;font-size:36px"> div 1 </div>

<div class="parallax2"></div>

<div class="text" style="height:150px;background-color:red;font-size:36px"> div 2 </div>

<div class="parallax3"></div>

<div class="text" style="height:150px;background-color:red;font-size:36px"> div 3 </div>

<div class="parallax"></div>

O que queria fazer era adicionar uma div/imagem no meio da primeira imagem no entanto essa mesma imagem tem que aparecer mais que uma vez mas a div não.

Para esclarecer melhor deixo aqui um exemplo.

1 Resposta 1

1

Criei uma classe .inner com a propriedade transform para chegar a esse resultado.

Existem diversas maneiras de centralizar uma divem outra, segue uma pergunta bem interessante do SOen que mostra algumas destas alternativas.

body,
html {
  height: 100%;
}

.parallax {
  /* The image used */
  background-image: url('http://vwgolftuning.com/wp-content/uploads/2013/11/orangerabbit-mk1-golf.jpg');
  /* Full height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 {
  /* The image used */
  background-image: url('http://s1.1zoom.me/big3/486/356925-Berserker.jpg');
  /* Full height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.parallax3 {
  /* The image used */
  background-image: url('http://s1.1zoom.me/big3/486/356925-Berserker.jpg');
  /* Full height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: red;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 200px;
  font-size: 36px;
  text-align: center;
}
<div class="parallax">
  <div class="inner">div 1</div>
</div>


<div class="parallax2"></div>

<div class="text" style="height:150px;background-color:red;font-size:36px"> div 2 </div>

<div class="parallax3"></div>

<div class="text" style="height:150px;background-color:red;font-size:36px"> div 3 </div>

<div class="parallax"></div>

2
  • Peço desculpa não sabia que tal política era aplicada neste site embora não concordo tenho que respeitar, apenas tentei ser simpático e não percebi o motivo de tal edição. Mais uma vez peço desculpa e obrigado pela resposta. Commented 27/09/2017 às 15:27
  • @BrunoGibellino Super tranquilo, eu deveria ter perguntado em forma de comentário antes de responder. E também tenho meus contras sobre a remoção das saudações, mas como tu mesmo disse, temos que respeitar.
    – Mathiasfc
    Commented 27/09/2017 às 15:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .