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

09.07.2017 | Tutoriais | 294 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.

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);        });    }});

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