You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.4 KiB
Markdown
42 lines
1.4 KiB
Markdown
3 years ago
|
---
|
||
|
|
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 -->
|