Studio Online. Treinamento em publicidade e design.

BlogFique por dentro

13 técnicas de animações em JQuery

0 Comentar

24.10.2011

Olá Pessoal!

Vamos falar hoje do JQuery, mais voltado para os webdesigners. Há alguns anos atrás, era inimaginável aplicar animações em um site sem o uso do Flash. Porém, com o desenvolvimento e aprimoramento de frameworks Javascript, a realidade mudou e cada profissional precisa adotar para si o hábito de estar por dentro das técnicas emergentes destes frameworks.

Existem vários destes, mas, o mais emergente, conhecido e usado no mercado é o JQuery. Se você, curte, disponibilizamos 13 formas, de inúmeras que existem, para exemplificar a forma de uso do JQuery.

Seguem:

1) Criando um robô animado com Jquery

3) Como criar uma “Página Mootools” inspirada nos efeitos de navegação usando JQuery

4) CSS Sprites2 – Javascript na veia!

4) CSS Sprites2 – Javascript na veia!

5) Criando um excelente formulário de login no JQuery

6) Foto slider – JQuery

7) Animações em nuância para substituir conteúdos

8) Usando JQuery para animações com background

9) Usando JQuery para animações com background

10) Menus animados com JQuery

11) Uma boa estrutura de navegação em JQuery

12) Menu animado em drop down usando JQuery

13) Menu animado em drop down usando JQuery

Enjoy it! ;)

Studio On-Line – Centro de treinamento oficial da Adobe

20 Galerias e Sliders JQuery + Tutoriais

1 Comentar

30.09.2011

Olá Pessoal!

Hoje vamos falar de galerias de foto e sliders JQuery! Quem é web designer sabe o quanto que o JQuery já proporcionou soluções rápidas e eficientes naqueles momentos de “aperto”. É evidente também que é muito complicada, dependendo da situação, a inserção de uma solução de galeria de fotos em virtude do cliente desejar dar a manutenção sem a ajuda de terceiros. Portanto, o JQuery é um módulo com fácil interação com tecnologias dinâmicas (PHP, ASPX, JSP, CFM… etc).

Para quem não sabe o que é JQuery, é um framework baseado em Javascript e que tem um lema muito interessante: “Write less, do more”, traduzindo, ESCREVA MENOS E FAÇA MAIS. Ele foi criado para fornecer soluções prontas para determinadas tarefas que seu site precisa desempenhar e que podem tomar um grande tempo do profissional para construir do nada.

Além disso, tem uma curva de aprendizado muito pequena e é fácil de trabalhar por ter uma aplicação super simples na sua estrutura html. E, mais importante do que isto, é a garantia que todos os navegadores vão carregar o site e as soluções em Jquery inclusas nele! Bem legal! =)

Para maiores informações sobre o Jquery, acesse www.jquery.com.

Voltando a falar das galerias de imagens, elas e os sliders jQuery são muito comuns em sites de portfólio e são muito úteis para qualquer outro site que pretende mostrar imagens e fotografias. Como dito anteriormente, adicionar uma galeria jQuery não precisa de ser difícil, mesmo que você não tenha muita experiência com JavaScript e jQuery.

Estamos sugerindo alguns plugins, tutoriais de galerias e sliders para que vocês possam ver o poder que o Jquery pode dar para uma necessidade que algum site que você esteja fazendo. Veja:

Rotação de imagens com descrição

Slider de notícias com títulos

Galeria de imagens com Fullscreen em JQuery e Flickr

Slideshow com JQuery

Ampliar Imagens com ‘On Mouse Hover’ em jQuery

Slideshow de Imagens jQuery com Títulos Transparentes

Galeria em Slider

Caixas com fotos e títulos deslizantes no JQuery

Bonito slider em JQuery

Bonito slider em JQuery

Outra galeria de imagens em JQuery

Coda slider effect

GalleryView

Lightbox

Gallerffic

Pikachoose

S3 Slider

Galeria de imagens em slider

Galeria em Flickr

Galeria com controles

Popeye

Smooth Div Control

A Studio On-Line oferece o curso de JQuery para quem quer conhecer mais um pouco do framework e potencializar suas soluções web. Clique aqui para saber mais informações ou nos contate no 61 3274-9961!

Até a próxima!

Studio On-line – Centro de Treinamento Oficial Adobe