Nivo Slider

Site oficial | Exemplos

O forte do Nivo Slider é um HTML limpo para a estrutura inicial do slider. Apenas um elemento div com imagens e links é necessário. O foco principal desse slider são imagens, mas o recurso de legenda em HTML acaba possibilitando a exibição de qualquer conteúdo.

Entre as opções oferecidas estão a velocidade e direção da transição e callbakcs para executar ações após o início e o carregamento dos slides. O plugin ainda possui nada mais, nada menos do que 16 opções de transição entre um slide e outro. Sua versão compactada possui 15kb.

Coda Slider

Site oficial | Demo

Este plugin surgiu baseado no slider do site do aplicativo Coda. Cada elemento do slide deve ser um elemento div com a classe “panel”.

O Coda Slider deixa um pouco a desejar na flexibilidade, oferecendo poucas opções, mas para exibir diferentes tipos de conteúdo é o plugin mais indicado.

Orbit

Site oficial

Desenvolvido originalmente para ser um slider de imagens, o Orbit acabou incorporando também conteúdo HTML, desde que o elemento div do conteúdo contenha um background definido.

Sua versão compactada é bem leve, 3.2kb e um outro diferencial bacana do Orbit é a aplicação de um loader marcando o tempo de transição entre os slides.

AnythingSlider

Site oficial | Exemplos

Como o próprio nome sugere, o AnythingSlider aceita tudo e qualquer tipo de conteúdo. Nas palavras do autor, “o plugin é uma tentativa de reunir todas as funcionalidades encontradas em outros plugins deste tipo”.

É o plugin mais adptável e que se integra melhor com o resto da sua aplicação oferencendo hashtags próprias para cada slide e possibilidade de criar um link direto para algum slide.

Moodular

Site oficial

O legal do Moodular é, como também o nome sugere, ser modular: core, control e effects. Dessa forma se você precisa de um slider simples não é necessário carregar o módulo de controle, por exemplo.

O módulo de efeitos do Moodular inclui o popular “reflection” (aquele da Apple) e a parte de controle já vem com suporte para aplicativos touchscreen, além de navegação via teclado.

Via tableless.com.br

jShowOff

A saída é totalmente personalizável com as opções previstas para a fixação automática ou clicar em on/off, a velocidade das transições, controles de liga/desliga, efeitos e muito mais.

Itens na rotator pode ir navegado com a ajuda de uma paginação, botões prev/nexte ou thumbnails (todos são opcionais).

Requisitos: jQuery
Compatibilidade: Todos os principais navegadores
Website: http://ekallevig.com/jshowoff/
Download: http://github.com/ekallevig/jShowOff

Via http://www.webresourcesdepot.com/

CamanJS

Tem uma sistema de camadas Semelhante aos do Photoshop ou o GIMP é cria muitas possibilidades. A biblioteca pode ser ampliada com novos plugins e filtros.

CamanJS é independente, pode ser utilizado com outras bibliotecas JavaScript e também tem uma versão NodeJS compatível.

Requisitos: Não Requisitos
Compatibilidade: Todos os navegadores modernos
Website: http://camanjs.com/
Demo: http://camanjs.com/examples
Download: http://github.com/meltingice/CamanJS

Via www.webresourcesdepot.com

jCoverflip

É possível definir o número de itens a serem exibidos e os velocidade da animação de transições.

Além disso, a aparência e podem ser personalizados como cores, fontes e cores utilizadas podem ser editados.

P.S. Opcionalmente, ele vem com “métodos de integração” para sites em Drupal como um módulo.

Requisitos: jQuery e jQuery UI
Compatibilidade: Todos os principais navegadores
Website: http://www.jcoverflip.com/
Demo: http://www.jcoverflip.com/demo
Download: http://www.jcoverflip.com/download
Via webresourcesdepot.com

@ Paulrouget

O resultado é bastante óbvio .

Via Internet Explorer 9 vs Firefox 4.0

Sencha Animator te permite crear animaciones de alta calidad, que te hacen levantar una ceja, usando única y exclusivamente CSS3, ni siquiera JavaScript, por lo que sí o sí podrá ser reproducido en cualquier explorador de Internet.

Este programa está orientado principalmente hacia la publicidad en internet. Ya que las animaciones que se pueden crear con él son tan buenas como las de Flash, hace hincapié en que usar CSS3 tiene muchas más ventajas en comparación a usar Flash para pequeños banners de anuncios, que básicamente son una especie de Gifs animados a los que les das clic.

Lo que puedes lograr con este nuevo programa son animaciones como movimiento de imágenes, rotación, manejar texto, y todo lo demás que puedes ver en estos ejemplos ofrecidos en la página web oficial. Estos demos sólo pueden ser vistos en algunos exploradores que utlicen WebKit, como Chrome, debido a los aún notables problemas de compatibilidad con HTML5 y CSS3.

El editor trae a la mente (de nuevo) a Flash, ya que trabaja con línea de tiempo y acciones que ocurren en determinado momento. Puede ser instalado en Linux, Mac y Windows, y viene en dos versiones: estándar, que puedes descargar, y la edición para publicidad, que aparentemente será paga.

Link Sencha Animator

Via Crea impresionantes animaciones en CSS3 con Sencha Animator

Na web existe uma boa ferramente pra te auxiliar nisso(…), é o site w3tableless.com onde você pode verificar se sua página é tableless ou não, basta digitar o endereço do seu web site no campo e clicar em “check”, se for tableless irá retornar um “Congratulations” pra você. Fica a dica.

Mas se você não sabe o que é um site tableless, recomedo a leitura da postagem “Tableless, conceito e importância” que é um resuminho básico sobre o conceito de tableless.

Fonte: Verifique se seu site é tableless

Ver Demo – Descargar Demo – Mais Informação  Pimp Your Tables with CSS3
Fonte: Tablas con CSS3

O site hongkiat.com preparou para você uma boa lista dos melhores plugins em jQuery para fazer a sua galeria de imagem onde podemos encontrar os recursos que você precisa para criar uma galeria ou um slider no seu site.

Supersized

Programa demonstrativo | Baixar
Gigante é um plugin jQuery slidehow fullscreen. Ele suporta imagens com o ciclismo preloading de imagem com efeito de transição.

Galleria

Programa demonstrativo | Baixar
Galleria é uma galeria de imagens escrito em javascript jQuery. Ele carrega as imagens uma a uma, de uma lista não-ordenada e exibe miniaturas quando cada imagem é carregada.

CU3ER Image Slider

Programa demonstrativo | Baixar
um controle deslizante de imagem, inicialmente concebido para criar transições entre slides 3D, acabou por ser uma solução conveniente e multifuncionais que podem ser aplicados em diversas áreas de construção de sites, desde slider conteúdo a característica deslizante e imagem e banner rotator.

jQuery lightbox

Programa demonstrativo | Baixar
plugin jQuery lightbox é simples, elegante, discreto, sem necessidade de marcação extra e é usado para sobrepor imagens na página atual com o poder ea flexibilidade do seletor do jQuery.

Gallerific

Programa demonstrativo | Baixar
Galleriffic é um plugin jQuery que fornece uma rica experiência pós-back livre otimizado para lidar com grandes volumes de fotografias.

Easy Slider

Programa demonstrativo | Baixar
Easy Slider é um plugin jQuery, você pode configurar suas próprias opções e é fácil de implementar.

Slider S3: jQuery Image Gallery

Programa demonstrativo | Baixar
Slider S3 é um plugin jQuery com efeitos agradáveis e com auto-imagem mudando.

Tudo o Slider

Programa demonstrativo | Baixar
AnythingSlider é um plugin jQuery com um monte de recursos (slides pode ser qualquer coisa, abas de navegação são construídos e adicionados dinamicamente …).

Coin Slider

Programa demonstrativo | Baixar
Coin Slider é um slider imagem jQuery com efeitos únicos.

Ciclo

Programa demonstrativo | Baixar
O jQuery Cycle Plugin é um plugin de slideshow que suporta muitos tipos diferentes de efeitos de transição.

Slider Conteúdo em Destaque

Programa demonstrativo | Baixar

Horinaja Plugin

Programa demonstrativo | Baixar
Horinaja está pronto para usar aplicação de slides, você também pode usar a roda do mouse para navegar entre os slides.

Transitions jqFancy

Programa demonstrativo | Baixar
jqFancyTransitions plugin jQuery é fácil de usar para visualizar suas fotos como slideshow com efeitos de transição fantasia.

jQueryGlobe – Plugin jQuery

Programa demonstrativo | Baixar

Looped Slider

Demo | Download

Nivo Slider

Programa demonstrativo | Baixar
Nivo Slider é um plugin jQuery de novo com excelentes recursos: 9 efeitos de transição original, teclado de navegação simples e limpa.

Piecemaker Galeria XML

Programa demonstrativo | Baixar
Piecemaker é uma fonte aberta 3D Flash galeria rotator imagem.

Pretty Photo

Programa demonstrativo | Baixar
prettyPhoto é um clone jQuery lightbox base. Não só as imagens ele suporta, mas também adicionar suporte para vídeos, flash, YouTube, iFrames.

Slide Deck

Programa demonstrativo | Baixar
Slide Deck é um fácil de implementar com um grande projeto.

Thickbox

Programa demonstrativo | Baixar
ThickBox é escrito em JavaScript. Sua função é mostrar uma única imagem, várias imagens, conteúdo inline, iframed conteúdo ou conteúdo servido através de AJAX em um modal híbrida.

Simples Slide

Programa demonstrativo | Baixar
Simples Slide é um plugin jQuery slideshow. É fácil de usar, pequeno e flexível.

Yoxview

Programa demonstrativo | Baixar
YoxView é uma imagem livre e visualizador de vídeos para websites. Ele é escrito em JavaScript usando jQuery e está disponível como um plugin do jQuery.

Abaixo você pode ver uma imagem so efeito, mais para ver melhor por favor visite o DEMO (em ingles).

Agora vamos ver o código.

HTML

<div class='img' id='img-1'>
	<div class='mask'></div>
	<img src='image/01.jpg' />
</div>
<div class='img' id='img-2'>
	<div class='mask'></div>
	<img src='image/07.jpg' />
</div>
<div class='img' id='img-3'>
	<div class='mask' id='mask-1'></div>
	<div class='mask' id='mask-2'></div>
	<img src='image/05.jpg' />
</div>
<div class='img' id='img-4'>
	<div class='mask'></div>
	<img src='image/04.jpg' />
</div>
<div class='img' id='img-5'>
	<div class='mask'></div>
	<mg src='image/06.jpg' />
</div>
<div class='img' id='img-6'>
	<div class='mask'></div>
	<img src='image/08.jpg' />
</div>

CSS

.img{
	float:left;
	-webkit-transition-duration: 0.5s;
	}
.img img{
	padding:10px;
	border:1px solid #fff;
}
.img:hover{
	-webkit-transform:scale(0.8);
	-webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
	width: 100%;
	background-color: rgb(0, 0, 0);
	position: absolute;
	height: 100%;
	opacity:0.6;
	cursor:pointer;
	-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
	height:0%;
}
#img-2:hover .mask{
	height:0%;
	margin-top:130px;
}
#img-3 #mask-1 {
	width:50%;
}
#img-3 #mask-2{
	width:50%;
	margin-left:211px;
}
#img-3:hover #mask-1{
	width:0%;
}
#img-3:hover #mask-2{
	margin-left:430px;
	width:0%;
}
#img-4:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
}
#img-5:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateZ(750deg);
}

Para visualizar o original visite o DEMO (em ingles). Espero que vocês gostem dessas effects, não esqueça de deixar o seu comentário.