O Turn.js é uma biblioteca JavaScript que faz o conteúdo parecer um livro ou revista de verdade, usando as vantagens do HTML5.
É uma biblioteca baseada no jQuery, versão 1.7 ou superior, então é um requerimento básico.
Temos o suporte para os navegadores:
- Chrome 12+
- Safari 5+
- Firefox 10+
- Internet Explorer 9+
Na prática
Como exemplo, vamos usar como base a história criada por Rodrigo Martins, que tranformou em quadrinhos o meme da internet “Já acabou, Jéssica”.
Vamos utilizar divs para criar as páginas do livro:
Foi utilizado as classes padrões .page em casos de páginas comuns, e a classe .hard para a capa e contracapa.
Agora vamos adicionar alguns estilos:
Cada página do quadrinho recebe seu próprio background, contendo o conteúdo desejado.
E por fim, só é preciso colocar 5 linhas de JavaScript:
E pronto: basta abrir o navegador e ser feliz. 🙂
Quem quiser ver o resultado basta clicar aqui. [Link atualizado]
Acesse:
Website do Turn.js
Github do Turn.js