css-houdini-drafts/css-paint-api/chat/index.html at master · andruud/css-houdini-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<style>
#example {
  background-image:
    url('http://lorempixel.com/200/200/cats/1/'),
    url('http://lorempixel.com/200/200/cats/3/'),
    url('http://lorempixel.com/200/200/food/1/'),
    url('http://lorempixel.com/200/200/food/2/'),
    url('http://lorempixel.com/200/200/food/10/');

  border: solid 0;
  border-image: paint(chat);
  border-image-slice: 0 fill;

  width: 120px;
  height: 120px;

  --chat-images-num: 1;
  transition: --chat-images-num 0.25s ease-in-out;
}
</style>

<div id="example"></div>
<button id="add">Add</button>
<button id="remove">Remove</button>

<script>
CSS.registerProperty({
  name: '--chat-images-num',
  syntax: '<number>',
  inherits: false,
  initialValue: '0',
});

(async function() {
  await (CSS.paintWorklet.addModule || paintWorkle.import)('chat.js');

  const elem = document.getElementById('example');
  const add = document.getElementById('add');
  const remove = document.getElementById('remove');

  let num = 1;
  add.addEventListener('click', () => {
    elem.style = `--chat-images-num: ${++num}`;
  });
  remove.addEventListener('click', () => {
    elem.style = `--chat-images-num: ${--num}`;
  });
})();
</script>