janis/obs-twitch-camera-frame
1
0
Fork 0
mirror of https://github.com/DerTyp7/obs-twitch-camera-frame.git synced 2025-10-29 04:42:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

added tf banner ;)

Browse Source
This commit is contained in:
Janis
2022-10-30 15:09:35 +01:00
parent 5dd6bbf290
commit c5e597ef58
5 changed files with 68 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
css/animations.css
View File

@@ -75,3 +75,12 @@
background: var(--border-color-flash-1);
}
}
@keyframes tfBannerAnimation {
from {
margin-top: -200px;
}
to {
margin-top: 0px;
}
}

24
css/style.css
View File

@@ -55,3 +55,27 @@ html {
animation-duration: 20s;
animation-name: backgroundAnimation;
}
#teafire-banner {
height: 50px;
width: 180px;
padding: 20px;
margin-top: -200px;
z-index: 1;
animation-timing-function: linear;
float: right;
}
#teafire-banner p {
color: teal;
float: left;
font-size: 23pt;
font-weight: bolder;
padding-top: 8px;
padding-left: 5px;
}
#teafire-banner img {
color: teal;
height: 50px;
float: left;
}

4
frame.html
View File

@@ -11,6 +11,10 @@
</head>
<body>
<div id="frame"></div>
<div id="teafire-banner">
<img src="img/logo128x128.png" alt="" />
<p>TealFire</p>
</div>
<div id="subCount">0</div>
<script src="config.js"></script>
<script src="js/socket.io.min.js"></script>

BIN
img/logo128x128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

31
js/app.js
View File

@@ -1,5 +1,6 @@
const subCount = document.getElementById("subCount");
const frame = document.getElementById("frame");
const tfBanner = document.getElementById("teafire-banner");
let subCountNumber = 0;
@@ -33,4 +34,34 @@ function sub(subName) {
updateSubCount();
}, 11000);
}
function showTealFireBanner() {
tfBanner.style.animationName = "tfBannerAnimation";
tfBanner.style.animationDuration = "3s";
tfBanner.style.animationDirection = "normal";
setTimeout(() => {
tfBanner.style.marginTop = "0px";
tfBanner.style.animationName = "";
tfBanner.style.animationDuration = "";
}, 3000);
}
function closeTealFireBanner() {
tfBanner.style.animationName = "tfBannerAnimation";
tfBanner.style.animationDuration = "3s";
tfBanner.style.animationDirection = "reverse";
setTimeout(() => {
tfBanner.style.marginTop = "-200px";
tfBanner.style.animationName = "";
tfBanner.style.animationDuration = "";
}, 3000);
}
setInterval(() => {
showTealFireBanner();
setTimeout(() => {
closeTealFireBanner();
}, 20000);
}, 300000);
updateSubCount();