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

Uma breve introdução da biblioteca Turn.js para fazer efeitos de páginas de livros no seu front-end.

por Fabio Soares 14/01/2016

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:

<div id="quadrinho"> <!-- Criando um novo quadrinho -->
    <div class="hard" id="capa"></div> <!-- Criando a capa -->
    <div class="hard"></div> <!-- Criando a parte de trás da capa -->
    <div class="page" id="pagina-2"></div> <!-- Criando as páginas -->
    <div class="page" id="pagina-3"></div>
    <div class="page" id="pagina-4"></div>
    <div class="page" id="pagina-5"></div>
    <div class="page" id="pagina-6"></div>
    <div class="page" id="pagina-7"></div>
    <div class="page" id="pagina-8"></div>
    <div class="page" id="pagina-9"></div>
    <div class="hard"></div>
    <div class="hard"></div> <!-- Criando a contracapa -->
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://raw.githubusercontent.com/blasten/turn.js/master/turn.min.js"></script>

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:

#quadrinho{ //Definindo o tamanho
    width: 800px; 
    height: 600px;
}
#quadrinho .page{ //Definindo os valores padrão para todas as páginas
    background-color: #FFF; //Fundo branco porque, caso não carregue as imagens, ela não fique transparente.
    background-size: cover; //O Fundo precisa cobrir toda a página
}
#quadrinho .hard{
    background-color: #CCC; //Fundo cinza para diferenciar das páginas comuns
    background-size: cover;
}

// Definindo as páginas que servirão de exeplo
#capa{
    background: url("http://tableless.com.br/uploads/2015/11/Paginas-01.png");
}
#pagina-2{
    background: url("http://tableless.com.br/uploads/2015/11/Paginas-02.png");
}
#pagina-3{
    background: url("http://tableless.com.br/uploads/2015/11/Paginas-03.png");
}
#pagina-4{
    background: url("http://tableless.com.br/uploads/2015/11/Paginas-04.png");
}
#pagina-5{
    background: url("http://tableless.com.br/uploads/2015/11/Paginas-05.png");
}
#pagina-6{
    background: url("http://tableless.com.br/uploads/2015/11/Paginas-06.png");
}
#pagina-7{
    background: url("http://tableless.com.br/uploads/2015/11/Paginas-07.png");
}
#pagina-8{
    background: url("http://tableless.com.br/uploads/2015/11/Paginas-08.png");
}
#pagina-9{
    background: url("http://tableless.com.br/uploads/2015/11/Paginas-09.png");
}

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:

$("#quadrinho").turn({
    width: 800, // Para definir a largura da página
    height: 600, // Para definir a altura da página
});

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