Criando efeitos de páginas de livro no seu front-end

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

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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *