Quantcast
Channel: Abduzeedo - Design Inspiration and Tutorials
Viewing all articles
Browse latest Browse all 5330

Animação Básica para Protótipos com CSS e Javascript

0
0
Animação Básica para Protótipos com CSS e Javascript

Motion design está ficando cada vez mais importante, principalmente na hora de criar interfaces que engajem os usuários tanto funcionalmente quanto emocionalmente. Por isso eu resolvi começar a fazer mais experimentos com Javascript e jQuery para criar animações básicas para meus protótipos. Uma das ideias mais comuns para animações que me vem em mente é construir uma lista com itens animados. Para ilustrar isso eu vou compartilhar uma técnica simples que uso nos meus protótipos.

Para esse breve tutorial nós vamos usar HTML, CSS e Javascript. O processo todo não vai levar mais de 30 minutos.

Passo 1

Comece um novo documento HTML e adicione alguns elementos, uma "Section" e uma lista "UL" com alguns objetos "LI"

Passo 2

Agora vamos importar jQuery e jQuery Transit plugin para nos ajudar a animar a lista.

Passo 3 - Animando a lista

Animar a lista é super simples, a primeira e mais importante parte a fazer é ter um pequeno script daquilo que você quer animar. Nesse primeiro caso nós vamos animar um LI de cada vez desaparecendo e indo para baixo (de cima para baixo).

O que estamos fazendo na função é encontrar cada "LI" e para cada um deles vamos setar com CSS para movê-los "-30px" no eixo Y (top) e mudar a opacidade para 0. Depois disso, com jQuery Transition nós vamos mover de volta para a posição original. Para garantir que cada um se mova em um tempo diferente, vamos setar um delay de 200 e multiplicar isso por "i" (cada elemento tem seu próprio "i").

Passo 4 - algumas rotações 3D

A única coisa que adicionamos aqui foi rotateX e transformOrigin no CSS e perspective e rotateX para a transição. Você pode brincar com esses valores para mudar as animações.

Conclusão

Abaixo você pode conferir um exemplo básico do que você pode fazer com Javascript simples. O melhor dessas animações é que elas usam GPU, e por isso funcionam bem em mobile devices e são perfeitas para protótipos.

See the Pen uqnjH by Fabio Sasso (@abduzeedo) on CodePen

Viewing all articles
Browse latest Browse all 5330

Latest Images

Trending Articles