Bullet chatting Demo

<bullet-chatting>

Attributes:

area:

allowOverlap:

Add a bullet-chatting:

                innerHTML: 
                
                style.fontSize: 
                 px
            
                mode: 
                
                bulletchattingduration: 
                 ms
            
                bulletchattingdelay: 
                 ms

const bulletchatting = document.createElement('bullet-chatting');

bulletchatting.innerHTML = 'bulletchatting';
bulletchatting.mode = 'scroll';
bulletchatting.bulletchattingduration = 4000;
bulletchatting.bulletchattingdelay = 0;
bulletchatting.style.fontSize = '25px';

document.querySelector('bullet-chatting-list').appendChild(bulletchatting);

Events:

const bulletchatting = document.createElement('bullet-chatting');
bulletchatting.innerHTML = 'bulletchatting';

bulletchatting.addEventListener('bulletchattingstart', () => {
    console.log('bulletchattingstart');
});
bulletchatting.addEventListener('bulletchattingend', () => {
    console.log('bulletchattingend');
});
bulletchatting.addEventListener('bulletchattingcancel', () => {
    console.log('bulletchattingcancel');
});

document.querySelector('bullet-chatting-list').appendChild(bulletchatting);

<bullet-chatting-list>

Set play state:

// play
document.querySelector('bullet-chatting-list').bulletchattingplaystate = 'running';
// pause
document.querySelector('bullet-chatting-list').bulletchattingplaystate = 'paused';

Set duration:

document.querySelector('bullet-chatting-list').bulletchattingduration = 1000;

Set area:

document.querySelector('bullet-chatting-list').area = 10;

Set allowOverlap:

document.querySelector('bullet-chatting-list').allowOverlap = true;