4

Olá, Gostaria de sabe se teria como fazer com que uma pagina sobreponha ("invada") a outra, tipo este modelo aqui:

Divisória entre a pagina 1/2

1
  • 2
    Normalmente isso é uma página só, com seções diferentes. Você pode até simular isso carregando pedaços com JS, ou usando includes, quem sabe até iframe, mas no fim vira tudo uma página só (e é fundamental entender como uma coisa só para poder projetar a folha de estilos responsável pela transição).
    – Largato
    24/04/2016 às 17:01

2 Respostas 2

2

Isso é apenas uma página, o que acontece é que a parte branca que é uma <div> está sobre outra <div>, isso é feito em CSS com a função z-index, exemplo:

HTML

<div id="imagem"></div>
<div id="bg_branco"></div>

CSS

#imagem {
     width: 100%;
     height: 100%;
     top: 0px;
     left: 0px;
     position: absolute;
     background-image: url(http://www.onordeste.com/administrador/personalidades/imagemPersonalidade/34d6911fdfdc4097a974a4b612313f70923.JPG);
     z-index: 1;
}

#bg_branco {
     width: 100%;
     height: 50%;
     top: 70%;
     left: 0px;
     background-color: #FFF;
     position: absolute;
     z-index: 2;
}
1

Na verdade esse efeito foi feito usando provavelmente um ::before por cima do background.

No elemento ::before vc pode usar o transform:skewY() para ter esse efeito.

Exemplo simples (coloquei uma pequena transparencia para vc ver que a imagem continua por baixo do ::before. Também coloquei uma div após a imagem pra vc ver como fica em um layout padrão)

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.bgimg {
    width: 100vw;
    height: 100vh;
    background: url(http://fillmurray.com/500/500) no-repeat ;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.bgimg::before {
    content: "";
    width: 100%;
    height: 135px;
    background-color: rgba(255, 255, 255, 0.9);
    right: 0;
    left: 0;
    bottom: -67px;
    position: absolute;
    transform: skewY(4deg);
    clear: both;
}
.corpo {
    background-color: lightgray;
    width:100%;
    height: 100px;
}
<div class="bgimg"></div>
    <div class="corpo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, quaerat.</div>

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 .