10 exemplos surpreendentes de animação CSS3 inovadora
O CSS3 trouxe uma série de novos recursos esteticamente impressionantes. Talvez o mais divertido deles seja a animação CSS, que permite executar muitas funções baseadas em movimento normalmente delegadas ao JavaScript. Junte-se a mim na minha jornada épica para descobrir o uso mais legal, inovador e mais importante e mais nerd da animação CSS na web. Início!
Aviso: essas animações são bastante específicas do navegador; portanto, se você estiver navegando no IE6, é hora de parar de assistir Saved By The Bell, abandonar a conexão dial-up e baixar um navegador moderno.
Polaroids rotativos
Este tutorial mostra como criar uma incrível pilha animada de fotografias utilizando uma tonelada de novos comandos CSS3. Começamos com um começo forte, este será difícil de vencer.
Clique para ver a demonstração
O Matrix
Siga o coelho branco ... er, quero dizer, confira esta incrível animação Matrix. Não é bem verdade no filme (os personagens individuais não mudam), mas impressionante mesmo assim. Vendo como Matrix é um dos melhores filmes de ficção científica de todos os tempos (estou falando do primeiro filme, não dos outros dois desastres), este vai pular para o topo da nossa lista e, sem dúvida, permanecer por um tempo até que um concorrente digno possa ser encontrado.
Clique para ver a demonstração
Coluna de giro trippy de diversão
Esta animação maluca apresenta uma coluna giratória composta por linhas rotativas de caixas coloridas e texto. O efeito geral é louco, legal e inegavelmente vertiginoso. Este é um pouco rachado demais para roubar o trovão de Matrix, porém, o campeão permanece.
Dica: para aumentar as chances de enjoo, role para cima e para baixo e balance a cabeça para frente e para trás enquanto assiste à animação (não somos responsáveis por nenhum hardware arruinado que você possui depois de jogar o almoço em cima da mesa).
Clique para ver a demonstração
DJ Hero
Este tutorial combina CSS3 e jQuery para criar registros giratórios. Usando os controles na tela, você pode controlar a velocidade dos registros ou simplesmente pegar um registro com o mouse para estabelecer alguns arranhões.
Toca-discos virtuais em um fundo de madeira vintage? Pode ser um grande concorrente, esse debate está esquentando. Vá em frente, clique nele. Você sabe que quer jogar.
Clique para ver a demonstração
Cubo Animado 3D
Este permite usar as teclas de seta para controlar a rotação de um cubo 3D. No começo eu pensei que era muito ruim, mas depois percebi que você podia segurar as setas do teclado para fazê-lo surtar e entrar no modo de morte turbo girando, o que obviamente o resgatou um pouco. Mega estilo de pontos por incluir Sonic The Hedgehog também.
Clique para ver a demonstração
Foguete
Um foguete sem dúvida trazido a você pelas maravilhas do MS-Paint voa pelo céu com uma velocidade impressionante. Mais ou menos ... Na realidade, ele meio que flutua, transportado por um estranho campo de força retangular com linhas pontilhadas. No meio da animação, o foguete praticamente desaparece sem motivo aparente, portanto é obviamente um foguete furtivo de alta tecnologia secreto com um dispositivo de camuflagem armado para evitar invasores destróieres vulcanos.
Não é exatamente um concorrente sério. De fato, por que eu mostrei isso para você? E ainda mais pertinente, existe algo como um destróier vulcano ou acabei de inventar isso?
Clique para ver a demonstração
Clima
Neve
Folhas
Vamos nocautear todo o clima de uma só vez, não é? Onde há animação brega, também há inevitável queda de neve, folhas, chuva, etc. Não me interpretem mal, são muito legais e podem levar a excelentes modificações sazonais no site. No entanto, essas execuções específicas, embora bem feitas, não são tão criativas com o contexto. Avise-me se você criar um site que tenha granizo gigante destruindo todo o conteúdo da página, agora isso seria algo.
Clique para ver a demonstração de neve
Clique para ver a demonstração de folhas
Cover Flow
Esta animação imita o fluxo de cobertura da Apple usando uma técnica híbrida de CSS / jQuery, como no exemplo do DJ Hero acima. Ao imitar a Apple, este apresenta um bom desempenho nas categorias cool e nerd e também faz um trabalho estrondoso ao ser inovador (este é o único fake CSS3 Cover Flow que eu poderia encontrar). Temos mais um candidato em nossas mãos.
Clique para ver a demonstração
Star Wars Crawl
É isso aí, game over. Gostaria de agradecer aos outros participantes por jogarem, mas este recebe o prêmio. É a cena de abertura de Star Wars, uma loucura, em voz alta… em HTML e CSS (é o texto ao vivo que você está parecendo um tolo). Pergunto-lhe, que melhor uso da animação CSS poderia haver? Eu afirmo que não há. Confie em mim, mostre isso ao seu amigo mais nerd e ele se transformará magicamente em uma criança de 4 anos na manhã de Natal.
Clique na demo Epic View
(Necessário Safari + Snow Leopard)
Conclusão
Para aqueles que acham que este concurso foi fraudado, você está certo. Eu inventei a ideia do concurso depois de encontrar o exemplo de Guerra nas Estrelas apenas para destacar o quanto todo o resto empalideceu em comparação. A verdadeira intenção do artigo é mostrar que não há fim para as coisas legais que você pode criar com os recursos de animação relativamente simples incorporados ao CSS3.
Use os comentários abaixo para nos informar qual foi o seu favorito. Além disso, se você souber de outros exemplos, compartilhe-os!
