JS-E05 - Efeito fade com JavaScript
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:
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:
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 initpara 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.
Para intalar através do npm execute o seguinte comando:
npm i brito101-fade
