Efeito Parallax sem plugins, apenas com HTML, CSS e JavaScript

09.07.2017 | Tutoriais | 505 visualizações

Aprenda a fazer um efeito Parallax sem utilizar plugins externos, apenas com um pouco de HTML, CSS e JavaScript. Um efeito simples e bonito com poucas linhas!

No exemplo abaixo, são três divs, porém, apenas a primeira e última estarão recebendo o efeito de parallax, por isso é adicionado a classe .prlx, mas as configurações serão feitas normalmente na folha de estilo CSS e o script será sempre fixo no seu js.

<div id="top" class="prlx">
</div>

<div id="mid">
</div>

<div id="bot" class="prlx">
</div>

style.css:

#top,
#mid,
#bot {
  width: 100%;
  padding: 20px 0;
}
        
#top {
  background: url("../img/background.jpg");
  height: 1200px;
}
        
#mid {
  background: #f0494d;
  height: 460px;
}
        
#bot {
  background: url("../img/background.jpg");
  height: 1200px;
}

javascript.js

$('.prlx').each(function() {
    var $obj = $(this);
    $obj.css('background-position', '50% 0');
    $obj.css('background-attachment', 'fixed');
    if ($(window).width() > 940) {
        $obj.css('background-size', '100%');
        $(window).scroll(function() {
            var offset = $obj.offset();
            var yPos = -($(window).scrollTop() - offset.top) / 10;
            var bgpos = '50% ' + yPos + 'px';
            $obj.css('background-position', bgpos);
        });
    }
});

Sobre Matheus Pereira

Tenho 22 anos de idade, sou paulistano, web designer e graduado em gestão da tecnologia da informação. Adoro músicas, jogos eletrónicos e sou completamente apaixonado pelo mundo da internet.

Contato

Vamos bater um papo, preencha os campos seguintes ou escolha outras formas de entrar em contato!

Estarei à disposição para o que e quando precisar.

contato@matheusp.com.br

São José do Rio Preto - SP

17 99133.8940

logotipo matheus pereira rodapé

Matheus Pereira

Desenvolvedor no mercado desde 2012, com foco em criação de sites, mídias sociais e otimização de SEO!