Blog do MX Cursos

20 exemplos sensacionais de efeitos em imagens com jQuery

20 exemplos sensacionais de efeitos em imagens com jQuery

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.

Neste post, listo uma série com 100 exemplos sensacionais de efeitos em jQuery que os inspirarão e facilitarão seus trabalhos.

Este post foi inspirado nesta publicação.

1.Expanding Overlay Effect

jQuery

Lindo efeito. O exemplo mostra um galeria bastante criativa que exibem 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.

Mais informações Ver exemplo Online

2.Expanding Overlay Effect

3D Thumbnail Hover Effect

Nossos cursos indicados

Eu gostei muito desse efeito. 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.

Mais informações Ver exemplo Online

3.Scrolable thumbs Menu

02_jQuery-Hover-Effect-3D_Image_menu

Este efeito é 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 criativo e lindo de se ver.

Mais informações Ver exemplo Online

4.Hover Slide Effect

03_jQuery-Hover-Effect-Image_Slide

Mais um ótimo efeito que os fotógrafos são adorar. Ele cria uma série de efeitos de 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.

Mais informações Ver exemplo Online

5.Bubbleirif Jquery Image Gallery

04_jQuery-Hover-Effect-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 preloader e se expande, dando destaque à imagem e ainda oferecendo um carrossel com arrows permitindo a navagação entre todas as fotos da galeria.

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

Mais informações Ver exemplo Online

6.Sweet Thumbnail Image Gallery

05_SweetThumbnailsPreviewGallery

Slider’s. Ah, os Slider’s! É um dos efeitos mais amados, populares e usados pela maioria de profissionais web. Existem diversos scripts de slider’s 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!

Mais informações Ver exemplo Online

7.Hover/Click Trigger For Circular Elements With Jquery

06_HoverClickTriggerCircles

Este efeito 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 um produto. 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.

Mais informações Ver exemplo Online

8.Direction-Aware Hover Effect With Css3 And Jquery

07_DirectionAwareHover

Eu achei este efeito 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.

Leia também  Be-a-bá: 5 linguagens para começar a programar e fazer algo incrível

O script 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.

Mais informações Ver exemplo Online

9.Circle Hover Effects With Css Transitions

08_CircleHoverEffects

Outro super efeito. Acredito que ele seja bem útil para produtos de um e-commerce, mas também para exibição de portfólios. O script 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.

Mais informações Ver exemplo Online

10.Caption Hover Effects

10_CaptionHoverEffect

Outro ótimo escript 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.

Mais informações Ver exemplo Online

11.3d Shading With Box-Shadows

11_3DShadingWithBoxShadows

Se você possui um site ou e-commerce de cd’s, dvd’s, vinis ou revistas, este script é 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.

Mais informações Ver exemplo Online

12.Creative Link Effects

12_jQuery-Hover-Effect-text-links

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.

Mais informações Ver exemplo Online

13.Animated Books With Css 3d Transforms

13_jQuery-Hover-Effect-Books-Hover

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.

Mais informações Ver exemplo Online

14.Responsive Icon Grid

14_jQuery-Hover-Effect-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.

Mais informações Ver exemplo Online

15.Simple Icon Hover Effects

15_jQuery-Hover-Effect-Icon-Hover

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.

Mais informações Ver exemplo Online

16.Pseudo-Elements Animations And Transitions

16_AnimatingTransitioningPseudoElements

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.

Mais informações Ver exemplo Online

17.Flipping Circle Slideshow

17_FlippingCircleSlideshow

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

Mais informações Ver exemplo Online

18.Sticky Caption Concept

18_StickyCaptionsConcept

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.

Mais informações Ver exemplo Online

19.Creative Web Typography Styles

19_CreativeWebTypographyStyles

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

Mais informações Ver exemplo Online

20.Fast Hover Slideshow

20_FastHoverslideshow

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.

Mais informações Ver exemplo Online

O MX Cursos já está na Black Friday.