1 Attachment(s)
Haha Reactions Emoji In Streaming Live Video in Jquery or asp.net or CSS
Good Day All
i have a Live Stream application and i want to implement the emoji animations that are all over the screen as its done in the video below . can someone direct me to an example that does this.
Attachment 185978
Thanks
Re: Haha Reactions Emoji In Streaming Live Video in Jquery or asp.net or CSS
The basic idea is that you will need to do the following:
- Create a new <img /> element and setup a timer (e.g. setTimeout)
- Set the element's position to absolute
- In the timer, change the element's top/left
- The horizontal movement can be fixed, e.g. move to the left 1px every tick
- The vertical movement can be "random", e.g. if the top/bottom isn't at the top or bottom of your view area then randomly move it to the top or bottom
I would suggest that you start the process of writing that out and if you run into any specific issues then follow up here asking how to resolve it.
Re: Haha Reactions Emoji In Streaming Live Video in Jquery or asp.net or CSS
Emojis are just single characters, and the canvas-method fillText can render text at any x/y-pos...
So, what you need (in a "basic setup") - is actually quite simple:
html:
Code:
<!DOCTYPE html>
<html>
<body>
<canvas id="c1" width="320" height="240" style="background:black" />
</body>
</html>
js-code:
Code:
function rr(min, max){
return Math.floor(Math.random()*(max-min) + min)
}
var arr = "😃,🤢,🥶,💔".split(",");
var ctx = document.getElementById("c1").getContext("2d")
setInterval(()=>{
ctx.font = rr(15,30).toString() + "px Arial"
ctx.clearRect(0, 0, 320, 240)
arr.forEach((e_char)=>{
var x = rr(0, 320), y = rr(0, 240)
ctx.fillText(e_char, x, y)
})
}, 100)
Ah.. well - have made a fiddle here: https://jsfiddle.net/t8k2bnea/1/
HTH
Olaf
