{"id":2368,"date":"2016-02-28T19:08:50","date_gmt":"2016-02-28T23:08:50","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=2368"},"modified":"2019-03-19T15:47:01","modified_gmt":"2019-03-19T18:47:01","slug":"20-exemplos-sensacionais-de-efeitos-em-imagens-com-jquery","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/20-exemplos-sensacionais-de-efeitos-em-imagens-com-jquery\/","title":{"rendered":"20 exemplos sensacionais de efeitos em imagens com jQuery"},"content":{"rendered":"

Se voc\u00ea busca modelos de efeitos em imagens com jQuery gr\u00e1tis<\/strong> para inserir em seu site, voc\u00ea est\u00e1 no lugar certo! Por muito tempo o Adobe Flash foi a solu\u00e7\u00e3o 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<\/a>, Acessibilidade e usabilidade<\/a> se tornaram t\u00e3o importantes quanto o pr\u00f3prio desenvolvimento do projeto.<\/p>\n

Com o avan\u00e7o de novas tecnologias e t\u00e9cnicas como o HTML5, CSS3 \u00a0principalmente jQuery, surgem novas possibilidades para quem precisa integrar criatividade a movimentos.<\/p>\n

Sem d\u00favidas, o emprego de efeitos criativos nos Layouts tornam a experi\u00eancia do usu\u00e1rio (UX Design) bem mais agrad\u00e1vel.<\/p>\n

Dica quente:<\/strong> Se voc\u00ea quer se especializar em Javascript, jQuery, HTML5, CSS3, Bootstrap e criar sites, sistemas e scripts t\u00e3o incr\u00edveis como esses, ou at\u00e9 mesmo entender os c\u00f3digos desses scripts, conhe\u00e7a nossos cursos de Front-End 100% em V\u00eddeo Aulas<\/a>.<\/p>\n

Neste post, listamos 20 exemplos sensacionais de efeitos em imagens com jQuery<\/strong>.<\/p>\n

Continue lendo!<\/p>\n

1. Expanding Overlay Effect<\/a><\/h2>\n

\"Expanding<\/a><\/p>\n

Lindo efeito. O exemplo mostra um galeria bastante criativa que exibe dados da previs\u00e3o de tempo. Se voc\u00ea possui um portal, poder\u00e1 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\u00favidas um dos melhores efeitos em imagens com jQuery<\/strong> desta lista.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

2. Expanding Overlay Effect<\/a><\/h2>\n

\"Expanding<\/a><\/p>\n

Eu gostei muito desse efeito de imagem em jQuery<\/strong>. Voc\u00ea pode observar 5 demos com efeitos distintos, cada um mais criativo que o outro. Esse efeito \u00e9 indicado principalmente para quem necessite criar galerias de imagens<\/strong>, mas tamb\u00e9m pode ser \u00fatil para utiliza\u00e7\u00e3o de thumbnails em blogs ou at\u00e9 mesmo imagem destacada no WordPress, j\u00e1 que ele exibe itens como visualiza\u00e7\u00f5es e favoritos por de tr\u00e1s da imagem.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

3. Scrolable thumbs Menu<\/a><\/h2>\n

\"Scrolable<\/a><\/p>\n

Este efeito de imagem em jQuery<\/strong> \u00e9 essencial para quem possui site, blog ou e-commerce de moda. Ele cria um menu expans\u00edvel com fotos<\/strong> e ainda possui um carrossel inverso passando foto por foto. Um efeito em jQuery<\/strong> criativo e lindo de se ver.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

4. Hover Slide Effect<\/a><\/h2>\n

\"Hover<\/a><\/p>\n

Mais um \u00f3timo efeito que os fot\u00f3grafos s\u00e3o adorar. Ele cria uma s\u00e9rie de efeitos com fotos<\/strong> saindo e entrando em slides e ainda oferece uma esp\u00e9cie de visualiza\u00e7\u00e3o rand\u00f4micas. Esse efeito, ali\u00e1s, pode ser usado em portais de conte\u00fado, j\u00e1 que galerias de destaques como esta est\u00e3o na moda e s\u00e3o bastante usados em diversos portais.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

5. Bubbleirif Jquery Image Gallery<\/a><\/h2>\n

\"Bubbleirif<\/a><\/p>\n

Magn\u00edfico. N\u00e3o poderia descrever de outra forma. O Bubbleirif oferece uma galeria de imagens<\/strong> em c\u00edrculos com diversos efeitos. Ele tamb\u00e9m \u00e9 em carrossel, sendo assim voc\u00ea pode “deslizar” de um lado para o outro passando de uma imagem para outra. Mas este efeito ainda reserva uma surpresa. Quando voc\u00ea clica na imagem, ela \u00e9 aberta ap\u00f3s um pre-loader e se expande, dando destaque \u00e0 imagem e ainda oferecendo um carrossel com arrows permitindo a navaga\u00e7\u00e3o entre todas as fotos da galeria. Outra boa op\u00e7\u00e3o entre os efeitos em imagens com jQuery <\/strong>listados aqui.<\/strong><\/p>\n

Sem d\u00favidas, outra alternativa perfeita para fot\u00f3grafos e sites e e-commerce da categoria.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

6. Sweet Thumbnail Image Gallery<\/a><\/h2>\n

\"Sweet<\/a><\/p>\n

Slider’s. Ah, os Slider’s! \u00c9 um dos efeitos mais amados, populares e usados pela maioria de profissionais web. Existem diversos scripts de slideshow<\/a> por a\u00ed, 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\u00e3o suave torna a experi\u00eancia do usu\u00e1rio mais que agrad\u00e1vel.<\/p>\n

O script tamb\u00e9m adequa e exibe as imagens em diversos tamanhos distintos e ainda cria outro efeito deslizante quando uma imagem \u00e9 menor que a outra. Ah, e n\u00e3o poderia faltar as arrows (setas) de comando. Sim, ele tamb\u00e9m possui setas!<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

7. Hover\/Click Trigger For Circular Elements With Jquery<\/a><\/h2>\n

\"Hover\/Click<\/a><\/p>\n

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

O efeito ao passar o mouse \u00e9 magn\u00edfico. Ele remove o emba\u00e7ado da imagem e ainda exibe o nome que poderia ser de um produto, por exemplo.<\/p>\n

Bom, eu gostei e tenho certeza de que voc\u00ea tamb\u00e9m vai gostar.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

8. Direction-Aware Hover Effect With Css3 And Jquery<\/a><\/h2>\n

\"Direction-Aware<\/a><\/p>\n

Eu achei este efeito de imagem em jQuery<\/strong> um barato. H\u00e1 grandes chances de voc\u00ea perder ou melhor, ganhar alguns minutos do seu dia brincando com este efeito. J\u00e1 adianto que ele pode ser usado em galeria de imagens, portf\u00f3lios e cat\u00e1logo de produtos.<\/p>\n

O script jQuery<\/strong> possui um efeito bem agrad\u00e1vel com uma esp\u00e9cie de Hover deslizante, mas o mais bacana \u00e9 que ele “integra” o efeito entre os itens da galeria, grids ou cat\u00e1logo. Ele passa de um bloco para o outro como se tudo fizesse parte de uma mesma grid.<\/p>\n

Magn\u00edfico! Super, hiper, mega recomendado!<\/p>\n

O script ainda possui em seu exemplo 3 op\u00e7\u00f5es onde voc\u00ea pode ver o efeito mais lento e com a disposi\u00e7\u00e3o inversa.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

9. Circle Hover Effects With Css Transitions<\/a><\/h2>\n

\"Circle<\/a><\/p>\n

Outro super efeito em imagens com jQuery<\/strong>. Acredito que ele seja bem \u00fatil para produtos de um e-commerce, mas tamb\u00e9m para exibi\u00e7\u00e3o de portf\u00f3lios. \u00c9 um script que cria diversos efeitos<\/strong> de exibi\u00e7\u00e3o de itens em c\u00edrculos. S\u00e3o in\u00fameras formas e disposi\u00e7\u00f5es.<\/p>\n

Os exemplos oferecem at\u00e9 7 views com in\u00fameros efeitos, todos distintos e magn\u00edficos.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

10. Caption Hover<\/a><\/h2>\n

\"Caption%20Hover%20Effects\"<\/a><\/p>\n

Outro \u00f3timo script de transposi\u00e7\u00e3o. Vejo que ele poderia ser usado tanto para produtos de e-commerce, galerias, portf\u00f3lios entre outros. Ele oferece in\u00fameros efeitos de hover, ali\u00e1s voc\u00ea pode visualizar at\u00e9 7 exemplos de efeitos dispon\u00edveis na p\u00e1gina de demonstra\u00e7\u00e3o.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

11. 3D Shading With Box-Shadows<\/a><\/h2>\n

\"3d<\/a><\/p>\n

Se voc\u00ea possui um site ou e-commerce de cd’s, dvd’s, vinis ou revistas, retr\u00f4, ou vintage, este script em jQuery<\/strong> \u00e9 a solu\u00e7\u00e3o ideal. Ele alia um efeito 3D bastante bonito. Se voc\u00ea quiser ainda, certamente, poder\u00e1 us\u00e1-lo tamb\u00e9m para apresenta\u00e7\u00e3o de portf\u00f3lio.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

12. Creative Link Effects<\/a><\/h2>\n

\"Creative<\/a><\/p>\n

Apesar de n\u00e3o ser efeito em imagens conforme prop\u00f5e o t\u00edtulo deste post, esse script \u00e9 fenomenal. Se voc\u00ea quer inspira\u00e7\u00f5es para menus<\/a>, este \u00e9 o ideal. Voc\u00ea 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.<\/p>\n

Vale a pena conferir e usar um ou mais desses efeitos em seus projetos.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

13. Animated Books With Css 3d Transforms<\/a><\/h2>\n

\"Animated<\/a><\/p>\n

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\u00ea ter\u00e1 uma din\u00e2mica do livro abrindo e sendo “folheado” at\u00e9 que apare\u00e7a o termo “Download”, que ali\u00e1s pode ser alterado para “Comprar”, por exemplo.<\/p>\n

Ver exemplo do script<\/strong><\/a><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

14. Responsive Icon Grid<\/a><\/h2>\n

\"Responsive<\/a><\/p>\n

Responsivo<\/a>, moderno e intuitivo. Este \u00e9 o Responsive Icon Grid. Indicado para grid de produtos, portf\u00f3lios ou at\u00e9 mesmo uma grid de servi\u00e7os. O efeito \u00e9 bem suave e agrad\u00e1vel.<\/p>\n

Sem d\u00favidas uma agrad\u00e1vel oportunidade de deixar seus projetos elegantes e modernos<\/strong>.<\/p>\n

Ver exemplo do script<\/strong><\/a><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

15. Simple Icon Hover Effects<\/a><\/h2>\n

\"Simple<\/a><\/p>\n

Um dos meus preferidos. O script re\u00fane uma gama de efeitos em \u00edcones. Um mais lindo que o outro. Voc\u00ea conta com 9 modelos de efeitos para escolher o que se adequa melhor ao seu projeto ou site.<\/p>\n

Indicado para qualquer tipo de aplica\u00e7\u00e3o onde haja necessidade de inser\u00e7\u00e3o de \u00edcones.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

16. Pseudo-Elements Animations And Transitions<\/a><\/h2>\n

\"Pseudo-Elements<\/a><\/p>\n

Apesar de din\u00e2micos, confesso. N\u00e3o me enche os olhos. Na minha opini\u00e3o o \u00fanico que salva \u00e9 o segundo dos quatro exemplos. Pode ser \u00fatil. Sim, sou sincero \ud83d\ude1b<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

17. Flipping Circle Slideshow<\/a><\/h2>\n

\"Flipping<\/a><\/p>\n

Um efeito bacana. Re\u00fane modernidade com um carrossel dentro de uma circle. Pode ser \u00fatil, principalmente se seu projeto possua cartoons ou desenhos.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

18. Sticky Caption Concept<\/a><\/h2>\n

\"Sticky<\/a><\/p>\n

Um efeito simples de hover que exibe uma tarja descritiva ao passar o mouse. J\u00e1 vimos exemplos semelhantes acima e mais bonitos, mas n\u00e3o deixa de ser mais uma \u00f3tima op\u00e7\u00e3o de efeitos em imagens com jQuery<\/strong>.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

19. Creative Web Typography Styles<\/a><\/h2>\n

\"Creative<\/a><\/p>\n

N\u00e3o \u00e9 um script de efeitos propriamente dito. Na verdade, re\u00fane 8 exemplos de artes com tipografias. Alguns elegantes. Pode ser \u00fatil em seus projetos.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n

20. Fast Hover Slideshow<\/a><\/h2>\n

\"Fast<\/a><\/p>\n

Particularmente n\u00e3o sou f\u00e3 desse script. Ele cria um efeito de acelera\u00e7\u00e3o nas fotos, passando uma a uma rapidamente como se criasse uma timeline da foto de uma modelo. Pode ser \u00fatil para sites ou e-commerce de vestu\u00e1rio ou moda em geral, mas n\u00e3o me agrada muito, mas talvez seja ideal para algum projeto peculiar.<\/p>\n

Ver exemplo do script<\/a><\/strong><\/p>\n

Fazer download do script<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Se voc\u00ea busca modelos de efeitos em imagens com jQuery gr\u00e1tis para inserir em seu site, voc\u00ea est\u00e1 no lugar certo! Por muito tempo o Adobe Flash foi a solu\u00e7\u00e3o 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 […]<\/p>\n","protected":false},"author":83,"featured_media":18483,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[1181,1239,1200,1232,1182],"class_list":["post-2368","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-css3","tag-gratis","tag-html5","tag-jquery","tag-responsivos"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/2368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=2368"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/2368\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/18483"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=2368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=2368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=2368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}