Mais de 20 demonstrações mostrando efeitos avançados de JQuery
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!