Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

D2th3

Background em movimento

Por , em Desenvolvimento frontend

Recommended Posts

androidel    7

androidel
Postado

Olá D2th3,

 

O nome desse método é chamado de Parallax, cuja imagem de fundo se movimenta lentamente do que o conteúdo. Ainda não sei como se trabalha isso, mas pelo visto você precisará utilizar uma biblioteca chamada JQuery. Eu tenho a lógica de que a estrutura do site é organizada em uma certa quantidade de divs, cada uma delas ocupa 100% de altura e largura. Exemplo:

 

Para cada div com class="box", irei aplicar 100% de width (largura) e height (altura).

 

<div id="container">
    <div id="box1" class="box">
        <div class="conteudo" id="conteudo1">
            Conteúdo da primeira caixa
        </div>
    </div>
    <div id="box2" class="box">
        <div class="conteudo" id="conteudo1">
            Conteúdo da segunda caixa
        </div>
    </div>
    <div id="box3" class="box">
        <div class="conteudo" id="conteudo1">
            Conteúdo da terceira caixa
        </div>
    </div>
</div>

 

OBS: Lembrando que para as porcentagens de altura e largura funcionarem, é preciso aplicar nas que estão acima delas, como: <html>, <body>, #container. Lembrando que na <div class="box"> você irá adicionar as imagens de fundo com a propriedade do CSS, chamada: background.

 

Quanto a animação (utiliza biblioteca JQuery), eu ainda não sei trabalhar com isso, porque eu poderia explicar. :/ Mas já está aí uma ideia de como você pode trabalhar com Parallax. Na minha opinião, a estrutura em HTML para criar um site desses é assim, pelo menos a base. ( '-' )

 

@EDIT

 

Ei, D2th3, dê uma olhada nesse site: http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html. Possui vários sites com esse novo método.

Compartilhar este post

Link para o post
Compartilhar em outros sites

D2th3    3

D2th3
Postado

Obrigado androidel,

 

Possuindo o nome do método,agora fica simples estudar e desenvolver o layout.

 

Qualquer novidade volto a postar nesse tópico.

 

At

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito