Efeito hover super legal e bem executado do site clerk.com, onde uma explosão de pequenos pixels acende, seu brilho oscilando do centro para as bordas de seu contêiner. Com algum tempo livre disponível durante este feriado de Ação de Graças, eu hackeei minha própria versão de um brilho de fundo de pixel canvas. Ele evoluiu rapidamente para um pixel-canvasWeb Component que pode ser apreciado na demonstração abaixo. O script do componente e o código de demonstração também foram enviados para um repositório GitHub.
Uso
Inclua o script do componente e insira um pixel-canvaselemento personalizado dentro do contêiner que ele deve preencher.
<script type="module" src="pixel-canvas.js"></script>
<div class="container">
<pixel-canvas></pixel-canvas>
<!-- other elements -->
</div>O pixel-canvasse estende até as bordas do contêiner pai. Quando o pai é passado, a diversão de pixels brilhantes acontece.
Opções
O elemento personalizado tem alguns atributos opcionais disponíveis para personalizar o efeito. Confira o painel html da demonstração do CodePen para ver como cada variação é feita.
data-colorspega uma lista de valores de cores separados por vírgulas.data-gapdefine a quantidade de espaço entre cada pixel.data-speedcontrola a duração geral do shimmer. Este valor é ligeiramente aleatório em cada pixel que, na minha opinião, adiciona um pouco mais de caráter.data-no-focusé um atributo booleano que diz ao Web Component para não executar sua animação sempre que elementos irmãos estiverem em foco. A animação é executada no foco irmão por padrão.
Provavelmente há mais testes e ajustes necessários antes que eu considere usar isso em qualquer lugar, mas meu objetivo era correr com essa inspiração simplesmente pela alegria de codificar. Que conceito hipnotizante. Tiro meu chapéu para os engenheiros criativos da Clerk.