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

09.07.2017 | Tutoriais | 566 visitas

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.

HTML

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

CSS

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

JavaScript

$('.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);
        });
    }
});

Matheus Pereira

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

CARREGANDO