Rellax.js - Recursos gratuitos do Parallax usando o JavaScript do Vanilla

Rolagem paralaxe parece incrível quando feito certo. Não é um recurso que você desejará em todos os sites, mas para sites de criação e páginas de destino, elementos de paralaxe agarra a atenção rapidamente.

Há toneladas de bibliotecas JavaScript gratuitas para efeitos de rolagem animados mas muitos estão inchados ou muito complexos para algumas pessoas.

É por isso que eu recomendo Rellax.js para as suas necessidades de paralaxe. É um plugin gratuito de código aberto construído em JavaScript, por isso não tem dependências.

Por padrão, requer apenas uma chamada de função simples para atribuir a classe paralaxe aos elementos da página. Então, conforme você rola, esses elementos ficar fixo e seguir o ponto de vista do usuário.

Você pode personalizar esses elementos para aparecer mais perto, mais longe ou por trás dos elementos da página. Isso cria o ilusão de profundidade na página e tudo funciona através de uma biblioteca JavaScript simples.

Todo o código-fonte do Rellax está disponível gratuitamente no GitHub se você quiser baixar uma cópia.

Toda a configuração usa uma única função JS visando o .rellax classe assim:

 var rellax = new Rellax ('. rellax'); 

Note que você pode usar bastante qualquer aula que você quiser, mas o exemplo demo usa .rellax por uma questão de simplicidade.

A partir daqui, você só envolva seus elementos de paralaxe dentro de um div com o .rellax classe e definir o atributo de velocidade. Isso funciona através do velocidade de dados-rellax atributo personalizado que aceita valores de -10 a +10.

Aqui está um exemplo de fragmento do HTML na página de demonstração:

 
 Eu sou mais lento e suave 
 

Você também pode elementos centrais na página e personalize as posições do elemento via CSS.

A Rellax não informa como estruturar a página ou como definir elementos CSS na sua página. Tudo o que faz é criar um efeito de rolagem paralaxe natural com JavaScript puro. Como você usa isso é totalmente até você.

Para ver um demonstração ao vivo, dê uma olhada no site principal ou navegue pelo repositório do GitHub. Isso inclui algumas documentações, além de links para sites ao vivo usando o Rellax.js.

E o melhor de tudo, a equipe está constantemente disposta a receber solicitações de pull, por isso, se você perceber algum problema ou tiver sugestões de recursos, basta enviar uma mensagem rápida para a equipe..