Front End

29 mai, 2018

Transformando suas imagens em adesivos com o Sticker.js

100 visualizações
Publicidade

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:

Figura de adesivo criada com o Sticker.js

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:

Sticker criado com o logo do iMasters

Gostou? Achou interessante? Você pode ver o exemplo deste artigo neste link.