Transformando suas imagens em adesivos com o Sticker.js

No meio de tantas bibliotecas JavaScript↳JavaScript116 conteúdosJavaScript em 2020: O que esperarDev (Back & Front) · jan 2020Campos públicos e privados em classes JavaScript – O que vem por aí no ESNextDev (Back & Front) · abr 201929 anos de JavaScript!Dev (Back & Front) · jan 2025Ver tudo em Dev (Back & Front) → 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.