aguarde...

24 de setembro de 2019

Rellax.js – Recursos gratuitos de paralax usando o Vanilla JavaScript

Rellax.js – Recursos gratuitos de paralax usando o Vanilla JavaScript

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:

1var 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:

123div class="rellax" data-rellax-speed="-7">I'm extra slow and smoothdiv>

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ê.

Plug-in de paralaxe Rellax.js

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.

Posted in Blog
Write a comment