Tableless

Busca Menu

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

Seja o primeiro a comentar por

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/wp-content/uploads/2015/11/Paginas-01.png");
}
#pagina-2{
	background: url("http://tableless.com.br/wp-content/uploads/2015/11/Paginas-02.png");
}
#pagina-3{
	background: url("http://tableless.com.br/wp-content/uploads/2015/11/Paginas-03.png");
}
#pagina-4{
	background: url("http://tableless.com.br/wp-content/uploads/2015/11/Paginas-04.png");
}
#pagina-5{
	background: url("http://tableless.com.br/wp-content/uploads/2015/11/Paginas-05.png");
}
#pagina-6{
	background: url("http://tableless.com.br/wp-content/uploads/2015/11/Paginas-06.png");
}
#pagina-7{
	background: url("http://tableless.com.br/wp-content/uploads/2015/11/Paginas-07.png");
}
#pagina-8{
	background: url("http://tableless.com.br/wp-content/uploads/2015/11/Paginas-08.png");
}
#pagina-9{
	background: url("http://tableless.com.br/wp-content/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

Publicado no dia