JS-E05 - Efeito fade com JavaScript

JS-E05 - Efeito fade com JavaScript
Publicado em 28/10/2021 15h50
Visualizações: 165

Efeito fade no DOM com puro JS

Link do código no GitHub: https://github.com/brito101/Fade.

O efeito de "fade" na página tem como propósito controlar a apresentação de forma suave para o usuário de acordo com a altura dos elementos na página, conforme eles entram na área de visualização do navegador. Este efeito é o que eu utilizo neste site, aplicando uma classe a cada elemento que eu desejei aplicar este efeito.

Anteriormente eu utilizava uma lib para este fim, que tinha como dependências o JQuery e JQuery UI. A utilização era a passagem do objeto selecionado como um parâmetro para uma função que era adicionada ao JQuery.

Conforme vamos evoluindo no conhecimento vamos ganhando autonomia para modificar, criar ou corrigir códigos e então decidi ajustar este script para reduzir o carregamento e melhorar a performance utilizando debounce no evento de scroll, situação não aplicada no código anterior.

Neste site não utilizo como classe, mas em formato de funções mesmo para reduzir o tamanho do código em algumas linhas, mas para permitir a portabilidade e simplicidade no uso, reescrevi em formato de classe e efetuei o upload no Git, para que, quem deseje utilizar não precise escrever e economize tempo.

O código da classe ficou da seguinte forma:

JS-E05 - Efeito fade com JavaScript

 Para a instanciar, é necessário passar o elemento do DOM que receberá o efeito. O método init altera a opacidade do elemento para zero e na sequência executa o método checkFades, que tem a responsabilidade de verificar se o topo elemento está dentro da área de visualização do navegador com um intervalo. Caso esteja a opacidade é alterada para um com um intervalo controlado, através do método fadeIn, utilizando o setInterval para somar décimos de opacidade a cada cinquenta milissegundos.

A instanciação, pode ser realizada da seguinte forma, importanto a classe para o arquivo ou no próprio arquivo abaixo da classe:

JS-E05 - Efeito fade com JavaScript

A constante fadeInScroll é a seleção dos elementos desejados, que contenham a classe de mesmo nome (pode ser qualquer nome). Caso existam, o objeto fade é instanciando recebendo a seleção e executando o método init para aplicar o efeito no conteúdo já carregado. Depois é aplicada a execução do método checkFades no evento de scroll, contudo, como a cada movimento da barra de rolagem ativa este evento, foi aplicado um intervalo de duzentos milissegundos para evitar a execução em um tempo não observável visualmente, reduzindo a quantidade de ativações (debounce).

Caso prefira um efeito de entrada mais sutil, altere o valor padrão de delay para 25 ou passe esse valor como segundo parâmetro na instanciação da classe Fade.

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.