Como dar um Efeito “Slip Scroll” Para o Seu Logo

Portuguese (Português) translation by Marina Boaventura (you can also view the original English article)

No tutorial de hoje nós vamos usar JavaScript para criar um simples e flexível efeito parallax onde um logo e o background mudam de cor quando o usuário rola a página.

Efeito slip scroll — O efeito Slip Scroll em ação

Nós vamos criar um elemento "default" para marcar o seu posicionamento (position: fixed), e vários elementos "móveis" nos quais a posição depende do elemento "default". Nós iremos usar JavaScript para fazer isso acontecer toda vez que o usuário rolar a página.

Leia o Tutorial

Marcação Básica

Nós vamos começar criando alguns elementos de conteúdo. Vamos fazer um dos backgrounds escuro e o outro claro, então podemos ter uma imagem contrastante dentro de cada um. Vamos à frente e fazer nossa primeira imagem. A imagem "default" que iremos atribuir a classe default, enquanto as outras imagens irão ter a classe moveable.

<div class="container dark">
  <img src="img/acme-light.svg" class="default">
</div>

<div class="container light">
  <img src="img/acme-dark.svg" class="moveable">
</div>

Estilos Básicos

Agora vamos nos certificar de que nossas imagens não irão acabar rolando para fora dos seus containers, setando overflow: hidden. Nós vamos também dizer que esses containers tem uma posição relativa, então os elementos posicionados como absolutos irão se alinhar baseados nesses containers ao ivés de diretamente ao elemento fixo quando escrevermos nosso JavaScript

Por uma questão de escrolabilidade, vamos dar a esses containers um min-height de por volta de 400px. E para manter nossos logos longe das bordas, vamos atribuir a eles algum padding de 1em.

.container {
  overflow: hidden;
  position: relative;
  min-height: 400px;
  padding: 1em;
}

Cada container precisa de alguma cor contrastante, então:

.dark {
  background: #333;
}

.light {
  background: #fff;
}

E finalmente, como prometido, vamos setar nosso CSS móvel. Então, um vai ficar fixo quando o usuário rolar a página, e o outro estará se movendo ao longo da página sem esbarrar nos outros elementos:

.default {
  position: fixed;
}

.moveable {
  position: absolute;
}

Isso deve ser suficiente para a marcação e estilo. Se você visualizar a página, você verá o logo default rolando para baixo na página e se escondendo por trás dos outros containers, enquanto todos os logos móveis estão aparecendo como elementos normais no topo-esquerda dos seus respectivos containers.

Introduzindo o JavaScript

Agora para a parte divertida, fazendo isso funcionar com JavaScript.

Primeiro nós vamos carregar o jQuery e nosso script costumizado no fim do nosso index.html:

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2	<script src="js/slipScroll.js"></script>
3	</body>
4	</html>

Criar e abrir um arquivo chamado js/slipScroll.js.

Dentro desse arquivo, a primeira coisa que nós vamos fazer é criar uma função chamada setLogo e jogar essa função dentro do evento de scrool do jQuery, assim, toda vez que o usuário rolar a página, esse evento será chamado. Nós vamos querer também nos certificar de chamar esse evento quando o usuário chegar pela primeira vez na página (antes dele rolar a página):

var setLogo = function() {

};

$(document).scroll(function() {
  setLogo();
});

setLogo();

Vendo as coisas funcionando

Agora para a mágica. Digamos que cada instância única do .moveable na página deveria mudar a posição top do seu CSS para a distância que a imagem default está do topo da página, menos a distância que o container desse elemento .moveable está do topo da página.

var setLogo = function() {

  $('.moveable').each(function() {
$(this).css('top',
      $('.default').offset().top -
      $(this).closest('.container').offset().top
    );
  });

};

Atualize sua página, e voila! Você acabou de criar um efeito de scroll pseudo-parallax a partir do 0 em apenas algumas linhas de código.

Conclusão

Eu enconrajo você a explorar essa solução. Tente brincar com a própria função JavaScript para ver quais offsets estranhos você vai obter se adicionar ou remover alguns pixels. Tente usar elementos diferentes (navegação alguém?) ao invés de apenas imagens para o seu conteúdo rolável.

Eu espero que você tenha aprendido bastante e sinta-se a vontade para comentar aqui em baixo se você tiver alguma pergunta.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!