Crie efeitos em cascata facilmente com o CascadeJS

Animações extravagantes são um centavo de uma dúzia na web. Eles estão ficando mais fáceis de criar com toneladas de incríveis bibliotecas de animação.

Cascade.js é mais uma biblioteca para adicionar à lista, e é definitivamente uma única. Com o Cascade, você pode criar efeitos de animação personalizados usando letras em cascata em texto ou elementos em cascata em um recipiente principal.

Esta biblioteca tem sem dependências; Ele é executado em JavaScript clássico. Você pode instalá-lo através do npm, Bower ou baixando uma cópia diretamente do GitHub.

Para fazer o CascadeJS funcionar, você precisa de dois arquivos: um arquivo CSS e um arquivo JavaScript. Ambos vêm embalados com versões minificadas para poupar alguns KBs no tamanho da página.

Cada elemento Cascade é dividido em partes separadas que animar individualmente através elementos. Esses são adicionado dinamicamente, para que você não precise alterar nada em seu HTML.

Mas você precisará configurar o fluxo() função no seu arquivo, depois de segmentar qualquer elemento que você deseja animar.

Você pode realmente use jQuery com esta biblioteca, se você quiser, no entanto, é não requerido. Então, se você preferir selecionar elementos com jQuery, sinta-se à vontade para usar isso.

Aqui está um trecho de baunilha JavaScript da demonstração do site principal:

Você pode passar o fluxo() elemento com sem parâmetros, ou você pode configure todos eles você mesmo. Leva oito parâmetros opcionais para editar o estilo de animação, tempo, duração e classes CSS opcionais.

CascadeJS tem outra função chamada fragmento() o que permite letras divididas (ou elementos) em recipientes separados, sem os animar. Você pode usar esta função para texto de cor e restyle na página, segmentando cada letra individual em uma palavra. Bem legal, né?

Todos amostras de código estão disponíveis abertamente na página principal da biblioteca, para que você possa copiar / colar e mexer por conta própria. Mas você também encontrará o documentação na página do GitHub, se você está procurando uma maneira mais clara de começar.