Há pouco tempo atrás, o Flash era uma das principais tecnologias usadas pelos web designers para adicionar interatividade a um site.

Desde a introdução do iPad, com a falta do Flash Player, há uma aceleração no mundo do desenvolvimento web para usar tecnologias alternativas ao Flash, como jQuery, Ajax e outras.

Embora o Flash ainda seja uma ferramenta muito poderosa e útil, que funciona muito bem em muitos casos, vários dos efeitos que os web designers estão acostumados a criar no Flash podem ser facilmente implementados usando o jQuery.

Aqui estão 21 demonstrações on-line que mostram o poder do jQuery para criar efeitos avançados e interatividade que podem competir com o Flash.

1. Virar! Um plugin jQuery

Este demo imita a técnica popular de flip de cartas, que pode girar um elemento 360 graus em torno de seu próprio eixo x ou y.

2. Plugin Quicksand jQuery

Este é um ótimo plugin para classificar uma matriz de elementos / ícones em uma página com efeitos de fade-in / fade-out e animação agradáveis.

3. ImageFlow

Esse visualizador de imagens é semelhante à interface CoverFlow da Apple, que se tornou tão familiar em seus vários produtos e aplicativos.

4. Construindo um mapa interativo com jQuery em vez de Flash

Esta demonstração une o poder do jQuery com o Ajax para realmente criar uma interface envolvente.

5. Dicas de Slide Out com jQuery e CSS3

Clicar nos símbolos "+" revela informações adicionais com um efeito de animação suave e agradável.

6. Galeria do Zoomer

Nesta demonstração, o que parece ser uma Galeria de imagens É dada alguma interatividade extra usando um efeito de zoom de várias camadas ao passar o mouse sobre uma imagem.

7. jQuery Circulate

Esta demonstração mostra o efeito Flash muito usado de circular uma imagem em volta de uma página - tudo feito usando jQuery.

8. Efeito de Menos Zoom na Foto

Esta demo parece enganosamente simples, mas após um exame mais detalhado, você descobrirá que há várias camadas na complexidade do efeito de redução de zoom.

9. Sliding Boxes e Legendas com jQuery

Aqui podemos ver como as transições poderosas podem ser criadas usando o jQuery, uma técnica antes reservada apenas para desenvolvedores Flash.

10. Galeria da Caixa de Luz CSS3

Este plugin parece ter sido escrito especificamente para mídias sociais. Arrastar e soltar uma foto em cima da “caixa de compartilhamento” abrirá uma janela modal que pode ser a interface para chamar uma API via AJAX que pode permitir ao usuário compartilhar uma foto no Flickr, Twitter, Facebook e outros sites.

11. Fazendo um efeito do Photoshoot com jQuery e CSS

Embora essa demonstração pareça fácil de usar à primeira vista, ela pode ser uma ferramenta muito poderosa para trabalhar com imagens grandes quando combinada com armazenamento local AJAX ou HTML5.

12. Awesome Bubble Navigation

Aqui o desenvolvedor faz bom uso de transições de cores e animação para produzir um menu muito atraente e interativo.

13. Navegação bonita da imagem de fundo

Nesta demonstração, cada ação do usuário aciona várias transições, as quais agem para imergir totalmente o usuário na interface.

14. AviaSlider

O AviaSlider usa efeitos clássicos de transição semelhantes ao Flash para aprimorar o que parece ser uma interface deslizante padrão.

15. Slideshow da Imagem de Fundo

Planos de fundo animados são uma das áreas em que o Flash costumava dominar o design da web. Aqui está um exemplo usando jQuery.

16. Panning Slideshow

Outra visão única sobre a interface de apresentação de slides típica. Aqui o autor adiciona navegação diagonal para apimentar a interface e fazer sobressair.

17. jqFancyTransitions

Este plugin pode ser usado para exibir suas fotos como uma apresentação de slides com efeitos de transição semelhantes a Flash.

18. iCarousel - controle deslizante de imagens horizontais

Outra apresentação de slides que adiciona apenas um toque de atenuação para fazer com que as transições realmente se destaquem. Não é de admirar que eles tenham optado por exibir produtos Mac sensuais nessa demo.

19. Criando uma imagem interativa com jQuery

Essa demonstração pode ser usada para aproveitar sites onde há muito espaço na tela. Clicar em uma seção do site revela uma caixa modal que exibe mais informações sobre a seção clicada.

20. Zoom da Nuvem

Um plugin que parece ter sido projetado com o eCommerce em mente. O Cloud Zoom é fácil de implementar e pode realmente melhorar a experiência do usuário.

21. Efeito de Retina Semelhante à Apple

Qualquer pessoa que tenha usado um iPhone, iPod touch ou iPad está familiarizada com o “Retina View”, que aumentará uma pequena área na tela quando você tocar na área por um longo período de tempo. Essa demonstração implementa esse efeito para a área de trabalho.


Compilado exclusivamente para WDD por Frota de Kalim . Ele é um web designer profissional e blogueiro com mais de 6 anos de experiência. A web é sua paixão enquanto divide seu tempo entre a escrita de blogs, desenvolvimento de software e mídia social. Ele adora usar e desenvolver novos aplicativos para a Web, dispositivos móveis e computadores.

Você conhece outros grandes exemplos de efeitos do jQuery que podem rivalizar com o poder do Flash? Você já sugeriu efeitos do jQuery sobre o Flash quando seus clientes os solicitam? Por favor, compartilhe suas opiniões e exemplos abaixo!