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.