Make ANIMATED WEBCAM ALERTS on OBS! (Custom CSS and HTML Tutorial)
132Making Animated Alerts has never been easier!
Disclaimer: This is neither a Photoshop or After Effects tutorial. I will briefly go over how I made my overlays USING PS and AE, however I will not go in depth with how to properly use these programs.
This is mainly a CSS and HTML tutorial for streamers.
This Tutorial will teach you how to Make ANIMATED ALERTS on OBS or Streamlabs OBS. For these alerts to be fully animated we will be using Custom CSS and HTML.
-------------------------------------------------------------------------------------------------------------------------
As mentioned in the video:
Ask question in Discord: https://discord.gg/MC4dtQh
or
Ask in the comments below
Socials:
Twitch: https://www.twitch.tv/gmeiners
Twitter: https://twitter.com/gmeiners__
-------------------------------------------------------------------------------------------------------------------------
Links:
WebM File for Media Encoder:
1. https://www.fnordware.com/WebM/
Custom Font Site:
2. https://transfonter.org/
HTML W3 School Link (for basic HTML needs):
3. https://www.w3schools.com/html/default.asp
CSS W3 School Link (for basic CSS needs):
4. https://www.w3schools.com/css/default.asp
CSS Fonts and Google Fonts:
5. https://www.w3schools.com/css/css_font.asp
6. https://www.w3schools.com/css/css_font_google.asp
Dafont Custom Fonts:
7. https://www.dafont.com/
CSS Animations / 2D transformations:
7. https://www.w3schools.com/css/css3_2dtransforms.asp
if there are any links that I forgot to include please let me know and I will be happy to add them!
-------------------------------------------------------------------------------------------------------------------------
Once Again:
Socials:
Twitch: https://www.twitch.tv/gmeiners
Twitter: https://twitter.com/gmeiners__
You can also reach me through my discord server https://discord.gg/MC4dtQh
----------------------------------------------------------------------------------------------------------------------------------------------------------------
Subscription Alert CSS: (Font Family Not Included)
#alert-text
{
font-size: 18px;
font-family: Enixe;
opacity: 100;
animation: slideIn 10s;
}
#name
{
color: #0af0f3;
position: fixed;
right: 975;
bottom: 20;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
width: 350px;
}
#months
{
color: #ffffff;
position: fixed;
right: 610;
bottom: 0;
}
@keyframes fadeIn {
0% {opacity:0;}
10% {opacity:0;}
20% {opacity:0;}
30% {opacity:1;}
40% {opacity:1;}
50% {opacity:1;}
60% {opacity:1;}
70% {opacity:1;}
80% {opacity:1;}
90% {opacity:0;}
100% {opacity:0;}
}
@keyframes slideIn {
0% { transform: translate(0px, -100px); animation-timing-function:ease-in-out }
6% { transform: translate(0px, 0px); animation-timing-function: ease-in-out }
70% { transform: translate(0px, 0px); animation-timing-function: ease-in-out }
90% { transform: translate(0px, -100px); animation-timing-function: ease-in-out }
100% { transform: translate(0px, -100px); animation-timing-function: ease-in-out }
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------
Check Comments for Subscription Alert HTML
Intro: (0:00)
How it Works: (1:07)
Photoshop: (3:33)
After Effects: (5:54)
WebM File Format: (12:31)
SLOBS Settings: (16:18)
HTML Tutorial: (19:21)
CSS Custom Fonts: (27:14)
CSS Tutorial: (34:44)