Blog do MX Cursos

20 exemplos sensacionais de efeitos em imagens com jQuery

20 exemplos sensacionais de efeitos em imagens com jQuery
5 (100%) 1 voto

Se você busca modelos de efeitos em imagens com jQuery grátis para inserir em seu site, você está no lugar certo! Por muito tempo o Adobe Flash foi a solução encontrada para “Dar vida” a elementos, imagens e sites em geral. E de certa forma, desempenhou bem seu papel, mas seu reinado teve fim quando o SEO, Acessibilidade e usabilidade se tornaram tão importantes quanto o próprio desenvolvimento do projeto.

Com o avanço de novas tecnologias e técnicas como o HTML5, CSS3  principalmente jQuery, surgem novas possibilidades para quem precisa integrar criatividade a movimentos.

Sem dúvidas, o emprego de efeitos criativos nos Layouts tornam a experiência do usuário (UX Design) bem mais agradável.

Dica quente: Se você quer se especializar em Javascript, jQuery, HTML5, CSS3, Bootstrap e criar sites, sistemas e scripts tão incríveis como esses, ou até mesmo entender os códigos desses scripts, conheça nossos cursos de Front-End 100% em Vídeo Aulas.

Neste post, listamos 20 exemplos sensacionais de efeitos em imagens com jQuery.

Continue lendo!

1. Expanding Overlay Effect

Lindo efeito. O exemplo mostra um galeria bastante criativa que exibe dados da previsão de tempo. Se você possui um portal, poderá por exemplo criar uma Landing Page contendo essa galeria. Ele expande a galeria quando clicado na localidade exibindo a temperatura e o tempo de cada dia da semana. Sem dúvidas um dos melhores efeitos em imagens com jQuery desta lista.

Ver exemplo do script

Fazer download do script

2. Expanding Overlay Effect

Eu gostei muito desse efeito de imagem em jQuery. Você pode observar 5 demos com efeitos distintos, cada um mais criativo que o outro. Esse efeito é indicado principalmente para quem necessite criar galerias de imagens, mas também pode ser útil para utilização de thumbnails em blogs ou até mesmo imagem destacada no WordPress, já que ele exibe itens como visualizações e favoritos por de trás da imagem.

Ver exemplo do script

Fazer download do script

3. Scrolable thumbs Menu

Este efeito de imagem em jQuery é essencial para quem possui site, blog ou e-commerce de moda. Ele cria um menu expansível com fotos e ainda possui um carrossel inverso passando foto por foto. Um efeito em jQuery criativo e lindo de se ver.

Ver exemplo do script

Fazer download do script

4. Hover Slide Effect

Mais um ótimo efeito que os fotógrafos são adorar. Ele cria uma série de efeitos com fotos saindo e entrando em slides e ainda oferece uma espécie de visualização randômicas. Esse efeito, aliás, pode ser usado em portais de conteúdo, já que galerias de destaques como esta estão na moda e são bastante usados em diversos portais.

Ver exemplo do script

Fazer download do script

5. Bubbleirif Jquery Image Gallery

Magnífico. Não poderia descrever de outra forma. O Bubbleirif oferece uma galeria de imagens em círculos com diversos efeitos. Ele também é em carrossel, sendo assim você pode “deslizar” de um lado para o outro passando de uma imagem para outra. Mas este efeito ainda reserva uma surpresa. Quando você clica na imagem, ela é aberta após um pre-loader e se expande, dando destaque à imagem e ainda oferecendo um carrossel com arrows permitindo a navagação entre todas as fotos da galeria. Outra boa opção entre os efeitos em imagens com jQuery listados aqui.

Sem dúvidas, outra alternativa perfeita para fotógrafos e sites e e-commerce da categoria.

Ver exemplo do script

Fazer download do script

6. Sweet Thumbnail Image Gallery

Slider’s. Ah, os Slider’s! É um dos efeitos mais amados, populares e usados pela maioria de profissionais web. Existem diversos scripts de slideshow por aí, um diferente do outro, e cada um com sua peculiaridade. Mas este script possui algumas particularidades interessantes. Ele exibe thumbnails, dando um charme a mais, mas o rollover ou deslizar do mouse sobre os bullets de forma tão suave torna a experiência do usuário mais que agradável.

O script também adequa e exibe as imagens em diversos tamanhos distintos e ainda cria outro efeito deslizante quando uma imagem é menor que a outra. Ah, e não poderia faltar as arrows (setas) de comando. Sim, ele também possui setas!

Ver exemplo do script

Fazer download do script

7. Hover/Click Trigger For Circular Elements With Jquery

Este efeito em imagens com jQuery tem um charme peculiar. Ele, talvez, mas vejam bem, eu disse TALVEZ, não seja muito indicado para galeria, mas vejo muita utilidade para exibição de imagem de destaque para produtos em um e-commerce. Sabe aquela imagem principal que geralmente aparece em uma product page de um e-commerce? Então, é ali mesmo que ela poderia ser usada.

O efeito ao passar o mouse é magnífico. Ele remove o embaçado da imagem e ainda exibe o nome que poderia ser de um produto, por exemplo.

Bom, eu gostei e tenho certeza de que você também vai gostar.

Ver exemplo do script

Fazer download do script

8. Direction-Aware Hover Effect With Css3 And Jquery

Eu achei este efeito de imagem em jQuery um barato. Há grandes chances de você perder ou melhor, ganhar alguns minutos do seu dia brincando com este efeito. Já adianto que ele pode ser usado em galeria de imagens, portfólios e catálogo de produtos.

O script jQuery possui um efeito bem agradável com uma espécie de Hover deslizante, mas o mais bacana é que ele “integra” o efeito entre os itens da galeria, grids ou catálogo. Ele passa de um bloco para o outro como se tudo fizesse parte de uma mesma grid.

Magnífico! Super, hiper, mega recomendado!

O script ainda possui em seu exemplo 3 opções onde você pode ver o efeito mais lento e com a disposição inversa.

Ver exemplo do script

Fazer download do script

9. Circle Hover Effects With Css Transitions

Outro super efeito em imagens com jQuery. Acredito que ele seja bem útil para produtos de um e-commerce, mas também para exibição de portfólios. É um script que cria diversos efeitos de exibição de itens em círculos. São inúmeras formas e disposições.

Os exemplos oferecem até 7 views com inúmeros efeitos, todos distintos e magníficos.

Ver exemplo do script

Fazer download do script

10. Caption Hover

Outro ótimo script de transposição. Vejo que ele poderia ser usado tanto para produtos de e-commerce, galerias, portfólios entre outros. Ele oferece inúmeros efeitos de hover, aliás você pode visualizar até 7 exemplos de efeitos disponíveis na página de demonstração.

Ver exemplo do script

Fazer download do script

11. 3D Shading With Box-Shadows

Se você possui um site ou e-commerce de cd’s, dvd’s, vinis ou revistas, retrô, ou vintage, este script em jQuery é a solução ideal. Ele alia um efeito 3D bastante bonito. Se você quiser ainda, certamente, poderá usá-lo também para apresentação de portfólio.

Ver exemplo do script

Fazer download do script

12. Creative Link Effects

Apesar de não ser efeito em imagens conforme propõe o título deste post, esse script é fenomenal. Se você quer inspirações para menus, este é o ideal. Você conta com 21 exemplos sensacionais de efeitos em hover para menu. Um mais lindo que o outro. Eu, particularmente, adorei os efeitos que simulam 3D.

Vale a pena conferir e usar um ou mais desses efeitos em seus projetos.

Ver exemplo do script

Fazer download do script

13. Animated Books With Css 3d Transforms

Outro efeito bacana e ideal para quem possui e-commerce de livros e e-books. O script conta com dois modelos de efeitos. Um moderno e outro no estilo desenho livre. Em ambos, você terá uma dinâmica do livro abrindo e sendo “folheado” até que apareça o termo “Download”, que aliás pode ser alterado para “Comprar”, por exemplo.

Ver exemplo do script

Fazer download do script

14. Responsive Icon Grid

Responsivo, moderno e intuitivo. Este é o Responsive Icon Grid. Indicado para grid de produtos, portfólios ou até mesmo uma grid de serviços. O efeito é bem suave e agradável.

Sem dúvidas uma agradável oportunidade de deixar seus projetos elegantes e modernos.

Ver exemplo do script

Fazer download do script

15. Simple Icon Hover Effects

Um dos meus preferidos. O script reúne uma gama de efeitos em ícones. Um mais lindo que o outro. Você conta com 9 modelos de efeitos para escolher o que se adequa melhor ao seu projeto ou site.

Indicado para qualquer tipo de aplicação onde haja necessidade de inserção de ícones.

Ver exemplo do script

Fazer download do script

16. Pseudo-Elements Animations And Transitions

Apesar de dinâmicos, confesso. Não me enche os olhos. Na minha opinião o único que salva é o segundo dos quatro exemplos. Pode ser útil. Sim, sou sincero 😛

Ver exemplo do script

Fazer download do script

17. Flipping Circle Slideshow

Um efeito bacana. Reúne modernidade com um carrossel dentro de uma circle. Pode ser útil, principalmente se seu projeto possua cartoons ou desenhos.

Ver exemplo do script

Fazer download do script

18. Sticky Caption Concept

Um efeito simples de hover que exibe uma tarja descritiva ao passar o mouse. Já vimos exemplos semelhantes acima e mais bonitos, mas não deixa de ser mais uma ótima opção de efeitos em imagens com jQuery.

Ver exemplo do script

Fazer download do script

19. Creative Web Typography Styles

Não é um script de efeitos propriamente dito. Na verdade, reúne 8 exemplos de artes com tipografias. Alguns elegantes. Pode ser útil em seus projetos.

Ver exemplo do script

Fazer download do script

20. Fast Hover Slideshow

Particularmente não sou fã desse script. Ele cria um efeito de aceleração nas fotos, passando uma a uma rapidamente como se criasse uma timeline da foto de uma modelo. Pode ser útil para sites ou e-commerce de vestuário ou moda em geral, mas não me agrada muito, mas talvez seja ideal para algum projeto peculiar.

Ver exemplo do script

Fazer download do script

Felipe Cardozo

Felipe Cardozo

Felipe Cardozo é fundador e professor do MX Cursos. Também é publicitário e criador do MX Masters e Video Aulas Brasil, ama tecnologia e como filho de pais professores, não poderia deixar de ser: Compartilha imediatamente tudo que aprende!

Your Header Sidebar area is currently empty. Hurry up and add some widgets.

Newsletter

Newsletter

Receba em seu e-mail conteúdos semanais sobre desenvolvimento, design, audiovisual e tecnlogia.

Inscrição realizada com sucesso!