---
title: Spawn Sticker
description: simple & flexible & adhesive
categories:
  - JS
  - Web
  - SI16
script: spawnSticker.js
css: sticker.css
date: 09/12/2021
git: https://git.xpub.nl/kamo/spawn-sticker
---

A script that let you add stickers on top of HTML elements. To make it works just add a `data-sticker` attribute to your element. The content of the sticker will be the value of the attribute.

```html
<div data-sticker='Hello'>World</div>
```

<div data-sticker='???'>

This script was used for the SI16 - Learning how to walk while cat-walking website. This is a simplified version. In the original one we had to deal with fixed elements (such as the header / nav of the pages) as well as relative ones. So the code there is a bit messier, but this one here it's simple and clean. 

</div>

<h2 data-sticker='tell us more'>
How does it work
</h2>

The code it's composed of 3 main functions: one to <span data-sticker='createSticker'>create</span> the sticker, one to <span data-sticker='spawnSticker'>spawn and attach</span> it to an element, and a last one to <span data-sticker='throttle'>limit the amount</span> of stickers spawned at once. 

<div data-sticker='wait for it'>
propper documentation coming sooon
</div>


<!-- Collect all the elements with the data-sticker attribute
```js
const stickerSpawners = document.querySelectorAll("[data-sticker]");
```

Create the -->