Rolagem paralaxe sem plug-in básico

Todo mundo gosta do efeito de rolagem de paralaxe da moda … ou é o que os designers parecem acreditar hoje em dia.

Embora certamente usado em excesso, às vezes pode ser uma ferramenta agradável e útil. Embora existam ótimos plug-ins ( parallax.js , jparallax , etc. de Matthew ), se você precisar de algo simples com apenas uma imagem de rolagem e não quiser incluir outro plug-in de 10k, há uma maneira fácil de fazer um efeito básico com apenas algumas linhas de JavaScript / jQuery e CSS.

Supondo que você deseja que o efeito seja aplicado em um <div class="hero">com uma imagem de fundo maior que a altura do elemento e uma inicial background-position: center bottom, você pode fazer algo assim:

var $hero = $('.hero'),
    heroBottom = $hero.offset().top + $hero.height();

$win.on('scroll', function() {
  var scrollTop = $win.scrollTop(),
      yPosPercent = (1 - Math.min(1, scrollTop / heroBottom)) * 100;

  $hero.css('background-position', 'center ' + yPosPercent + '%');
});

Você pode vê-lo ao vivo aqui na página inicial, serviços e portfólio.