Playing with OBS overlay .
Falling hearts animation overlay for OBS
A live demo here
https://cgc-designs.tumblr.com/overlay_hearts
The full code is there.
How to use it.
1. create a folder on your desktop
2. create a new plain text document using Notepad (windows) ... copy the code from Tumblr and paste it inside the plain text file
3. Save As... html (name it and change the extension to .html instead of .txt)
4. Open OBS, click the plus icon to add a new source and select the Browser option (optional you can name that to FallingHearts or whatever you want -- easier to spot if you use multiple overlays)
5. Select
local file check box, browse for the html file
6. width and height is up to you how you set those based on your screen resolution.
7. Check bot boxes for
Shutdown source ... and
Refresh browser...
A few tweaks for better positioning and you are ready to go.
I'd strongly suggest to download and replace the graphics because they are hosted by Tumblr right now and you'll have issues later.
1. In the same folder (mentioned above) - Download and save all graphics (the link is there)
2. Open the source code in your fav html editor and replace the hosted graphics with local ones.
Have fun
Note: the overlay is triggered manually.
Skip the red ones
Update:
better I'll add a zip file for you to download because I see that Tumblr is adding additional codes there... but the demo is working fine.
Download / zip file