No meio de tantas bibliotecas JavaScript espetaculares, disponíveis na internet, vamos falar de uma em particular, que eu achei bastante interessante, talvez não tanto pela sua utilidade prática no dia a dia, mas sim pelo seu efeito na página.
Estou falando do Sticker.js. Com ele conseguimos transformar imagens estáticas em imagens que parecem literalmente um adesivo, colando e descolando da tela – é muito legal. Basta passar o mouse sobre o elemento criado e ele vai aparentar estar descolando.
E sabe qual é o melhor de tudo? É bastante simples de implementar, sendo que não é necessária nenhuma dependência, nem mesmo o jQuery! Vamos dar uma olhada em como utilizá-la.
Exemplo de implementação
Para mostrar como podemos utilizar a biblioteca, vamos criar um exemplo bem simples utilizando o CodePen. O primeiro passo é trazer a biblioteca para dentro da plataforma online. Como não consegui encontrar nenhum link disponível via CDN, apenas copie e cole este código no quadro do JavaScript.
Feito isso, já podemos colocar a mão na massa. Começaremos criando simplesmente uma div com a classe de nome sticker. Feito isso, não vamos mais mexer no HTML.
<div class="sticker"></div>
Agora, o que precisamos é colocar algum estilo nesta div que representará o adesivo. Para este exemplo, vou basicamente definir um tamanho, uma altura e uma cor de fundo.
.sticker { width: 180px; height: 180px; } .sticker-img { background-color: red; //Cor do sticker ou imagem }
Com tudo isso em mãos, precisamos chamar o método init() do Sticker.js com os elementos de destino (classe da div criada). No nosso caso, colocaremos “sticker”.
Sticker.init('.sticker');
Se o seu CodePen estiver configurado com o Auto-Updating Preview, assim que você chamar a função o adesivo já será criado automaticamente. Sua janela ficará muito semelhante a da figura a seguir:
O que achou do efeito? Bem divertido, não é mesmo? Podemos trocar a nossa cor vermelha por uma imagem como, por exemplo, o logo do portal iMasters. Para isso, basta alterar a classe .sticker-img no CSS.
.sticker-img { background-color: red; //Cor do sticker ou imagem }
O efeito continuará sendo o mesmo:
Gostou? Achou interessante? Você pode ver o exemplo deste artigo neste link.