Criar widgets totalmente animados com o Shift.css

Animação Web oferece uma maneira de agarrar a atenção das pessoas e atraí-los ainda mais em um site. Existem muitas ferramentas lá fora para criar animações gratuitas mas Shift.css é um dos mais novos do grupo.

É um estrutura livre de código aberto feito para criar animações dinâmicas dentro de qualquer contêiner. E essas animações não estão trancados em uma sequência. Você pode realmente criar animações personalizadas para cada elemento no bloco e aplicar estes em uma determinada ordem.

o Página de demonstração de turno pode te mostrar muito melhor do que eu posso explicar em palavras.

Uma coisa que você notará é que cada elemento dentro do contêiner é um elemento HTML separado. Seja um SVG ou uma imagem ou qualquer outra coisa, você pode animar tudo separadamente para crie seu próprio efeito de animação personalizado.

A biblioteca vem com dois arquivos, um .css e .js biblioteca, e ambos precisam ser adicionado à sua cabeça de documento.

Não consigo encontrar nenhum repositório do GitHub para este projeto, então você precisará baixar os arquivos diretamente do site da Shift.css.

O próximo passo é definir um elemento contêiner com algum conteúdo. Nomes de classes são importantes, então todo elemento de animação precisa tenha a classe .elemento de deslocamento aplicada.

Junto com essas classes, você também pode adicionar atributos de dados HTML5 para definir como a animação funciona. Neste momento, existem apenas três, mas devem ser suficientes para personalizar um efeito de animação completo.

1. animação de dados: Nome da animação
2. atraso de dados: Atraso total (em segundos) antes da animação começa
3. duração dos dados: Duração total (em segundos) da animação

O nome da animação precisa ser um animação predefinida criado para a biblioteca Shift. Neste momento existem 15 nomes de animação para escolher. Você pode vê-los listados na parte inferior da página inicial do Shift.css.

Somente copiar colar o que você quiser na configuração do nome da animação e você deve ser bom para ir! Por exemplo, se eu quisesse usar a animação de desvanecimento de saída, adicionaria data-animation = "shift_exitFade" como um atributo de dados para qualquer elemento que deve ser animado dessa maneira. Mole-mole.

Eu gostaria que essa biblioteca viesse com mais opções em JavaScript, pois permitiria que os desenvolvedores tivessem muito mais controle sobre o canal e os recursos. Mas para uma estrutura de animação simples (e gratuita) não posso reclamar.

Shift.css é perfeito para desenvolvedores mais novos quem quer criar estilos de animação mais complexos sem escrever código verboso a partir do zero.