13/02/12

Criando um efeito de paginação de revista com JQuery

Turn.js é um plugin muito útil do JQuery que serve para criar um efeito de paginação de revista e, segundo o seu criador, Emmanuel Garcia, ficaria bem em sites sobre livros, revistas ou qualquer material de leitura.

Muitos sites que possuem catálogos de ofertas, também utilizam esse design em seu website (eu já vi no site do Shopping Matriz e no da Insinuante) que normalmente, são feitos em Flash. Porém, dessa vez, seguindo a linha do post sobre a teoria da conspiração sobre a morte do flash, iremos mostrar como ele pode ser feito em JQuery.

CSS
#magazine{
   margin: 0 auto;
   width:800px;
   height: 400px;
}

#magazine .turn-page{
   width:400px;
   height:400px;
   background-color:#eee;
}



HTML
Page 1
Page 2
Page 3
Page 4

JQuery (coloque dentro de uma tag script, abaixo da div magazine)
$('#magazine').turn();
Fácil não? Pois bem, para que este código funcione como deve, você pode baixar a versão light do turn.js, clicando aqui ou a versão completa do pugin clicando aqui, direto do site do desenvolvedor. Coloque a referência para o arquivo turn.js na tag HEAD de seu HTML e não esqueça de fazer referência para a biblioteca de JQuery.

Além de fácil de ser instalado em seu site, este plugin utiliza aceleração de hardware para exibir as páginas em forma de revista, funciona também em tablets e smartphones e é relativamente leve, pesando em torno de 15 KB.

Para visualizar um demo em funcionamento, clique aqui.

Não esqueçam de curtir nossa página e assinar a nossa newsletter. Obrigado a todos mais uma vez e até o próximo post.




11 comentários:

Marcio disse...

Não consegui fazer funcionar no IE 9.

Anônimo disse...

Não consegui fazer funcionar no IE 9

Anônimo disse...

Não consegui fazer funcionar no IE 9

Anônimo disse...

Cara perfeito isso *-*
funciona normal no IE9

Anônimo disse...

Alguem poderia me explicar como faria para as paginas aparecer vindo de um banco de dados?

vlws

Anônimo disse...

Também não consegui fazer funcionar no IE9. tem algum segredinho?

André disse...

Para que seja colocada em um banco de dados, vc terá que carreagar as imagens da div pelo code behind da mesma forma que vc carregaria em uma imagem normal do banco, no meu caso as imagens do banco são salvas como BIT depois converto e carrego no load da pagina do meu Code Behind ...
Abraço...

Anônimo disse...

no Chrome ele não funciona.. alguém saberia o pq?

Wellington Victor dos Santos disse...

Não funciona no chrome? aqui não esta funcionando.. outros navegadores ta ok.

Anônimo disse...

O Chrome está me enlouquecendo. Muitas coisas estão deixando de funcionar nele...

ADVPL disse...

Não funciona no Chrome! Nos outros navegadores funciona.