A rolagem de paralaxe parece incrível quando bem feita . Não é um recurso que você deseja em todos os sites, mas para sites criativos e páginas de destino, os elementos de paralaxe chamam a atenção rapidamente .
Existem inúmeras bibliotecas JavaScript gratuitas para efeitos de rolagem animada, mas muitas são inchadas ou são muito complexas para algumas pessoas.
É por isso que recomendo o Rellax.js para suas necessidades de paralaxe. É um plug-in de código aberto gratuito desenvolvido com JavaScript vanilla, por isso não possui nenhuma dependência .
Por padrão, requer apenas uma chamada de função simples para atribuir a classe paralaxe aos elementos da página. Então, enquanto você rola, esses elementos permanecem fixos e se movem junto com o ponto de vista do usuário.
Você pode personalizar esses elementos para parecerem mais próximos, mais distantes ou atrás dos elementos da página. Isso cria a ilusão de profundidade na página e tudo funciona através de uma simples biblioteca JavaScript.
Todo o código fonte da Rellax está disponível gratuitamente no GitHub, se você deseja fazer o download de uma cópia.
Toda a instalação usa uma única função JS direcionada à classe .rellax da seguinte maneira:
| 1 | var rellax = new Rellax('.rellax'); |
Observe que você pode usar praticamente qualquer classe que desejar , mas a demonstração de exemplo usa .rellaxpor uma questão de simplicidade.
A partir daqui, você apenas envolve seus elementos de paralaxe dentro de uma div com a .rellaxclasse e define o atributo speed . Isso funciona através do data-rellax-speed atributo personalizado que aceita valores de -10 a +10.
Aqui está um exemplo de trecho do HTML na página de demonstração:
| 123 | <div class="rellax" data-rellax-speed="-7">I'm extra slow and smooth</div> |
Você também pode centralizar elementos na página e personalizar as posições dos elementos via CSS.
Rellax não diz como estruturar a página ou como definir elementos CSS em sua página. Tudo o que faz é criar um efeito de rolagem de paralaxe natural com JavaScript puro. Como você usa isso é totalmente com você.
Para ver uma demonstração ao vivo , dê uma olhada no site principal ou navegue pelo repositório do GitHub . Isso inclui alguma documentação, além de links para sites ativos usando o Rellax.js.