Como é que este efeito de imagem criado?

Question

Eu olhei a página por algum tempo agora. Incrível, realmente. Mas eu não posso dizer como a imagem efeito de fundo que acontece em obras de rolagem. Passaram pelo código encontrado que eles estão usando Jquery mais um número de plugins de rolagem, mas nada sobre as imagens que eu posso ver.

Como você diria que ele é feito?

O site: http://herohousing.org/UBBT/

Answer 1

Este truque é bastante simples e só precisa de um pouco de CSS em que cada painel tem uma imagem de fundo que é fixo:

<style type="text/css">
    div {
        height: 100%;
        background-image: url(http://sstatic.net/so/img/logo.png);
        background-attachment: fixed;
        border: thin solid;
    }
    div.a {
        background-repeat: repeat-x;
        background-color: #FDD;
    }
    div.b {
        background-repeat: repeat-y;
        background-color: #DFD;
    }
    div.c {
        background-repeat: no-repeat;
        background-color: #DDF;
    }
</style>

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

Aqui eu estou usando a mesma imagem de fundo, mas a cor diferente do fundo e imagem de repetição deve mostrar-lhe que é três elementos diferentes.

---

Editar Ok, parece de que alguma dúvida que eu estou escrevendo. E, de fato, o site citado usa jQuery para isso. Mas apenas para ajustar a imagem à largura e altura da janela do navegador desde que você não pode dimensionar uma imagem de fundo ainda. CSS 3 especifica um background-size propriedade mas seu apoio é ainda proprietária usando o prefixo de fornecedor específico, como -khtml- (Konqueror), -moz- (Gecko baseado navegadores como o Firefox), -o- (Opera) e -webkit- (navegadores baseados no WebKit como o Safari).

Se você pode abster-se de que, você pode usar a técnica CSS eu mostrei.

Answer 2

É 4 divs uma imagem de fundo diferente para cada um, o que torna o trabalho efeito particularmente bem é com a "anexado background-: fixo"; propriedade para parar a rolagem de fundo.

Se você baixar o Firebug para o Firefox, você pode inspecionar o div de e observar como o CSS faz com que se comportam página e tentar replicá-la para si mesmo.

Realmente agradável efeito Devo admitir procurando: -)