mirror of
https://github.com/DerTyp7/obs-twitch-camera-frame.git
synced 2025-10-30 13:17:14 +01:00
Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
80ea3c297e | ||
|
|
c5e597ef58 | ||
|
|
5dd6bbf290 | ||
|
|
a45f99ecd3 | ||
|
|
14079a997e | ||
|
|
23044c320d |
@@ -1,13 +1,5 @@
|
||||
@keyframes subAnimation {
|
||||
0% {
|
||||
border-image: linear-gradient(
|
||||
to top,
|
||||
var(--border-color-1),
|
||||
var(--border-color-2)
|
||||
)
|
||||
1;
|
||||
}
|
||||
10% {
|
||||
border-image: linear-gradient(
|
||||
to top,
|
||||
var(--border-color-flash-1),
|
||||
@@ -23,7 +15,7 @@
|
||||
)
|
||||
1;
|
||||
}
|
||||
80% {
|
||||
100% {
|
||||
border-image: linear-gradient(
|
||||
to top,
|
||||
var(--border-color-flash-1),
|
||||
@@ -31,14 +23,6 @@
|
||||
)
|
||||
1;
|
||||
}
|
||||
100% {
|
||||
border-image: linear-gradient(
|
||||
to top,
|
||||
var(--border-color-2),
|
||||
var(--border-color-1)
|
||||
)
|
||||
1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes borderAnimation {
|
||||
@@ -82,18 +66,21 @@
|
||||
|
||||
@keyframes backgroundSubAnimation {
|
||||
0% {
|
||||
background: var(--border-color-1);
|
||||
}
|
||||
10% {
|
||||
background: var(--border-color-flash-1);
|
||||
}
|
||||
50% {
|
||||
background: var(--border-color-flash-2);
|
||||
}
|
||||
80% {
|
||||
100% {
|
||||
background: var(--border-color-flash-1);
|
||||
}
|
||||
100% {
|
||||
background: var(--border-color-2);
|
||||
}
|
||||
|
||||
@keyframes tfBannerAnimation {
|
||||
from {
|
||||
margin-top: -200px;
|
||||
}
|
||||
to {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
:root {
|
||||
--border-color-1: rgb(139, 0, 0);
|
||||
--border-color-2: rgb(255, 74, 74);
|
||||
--border-color-1: rgb(113, 0, 0);
|
||||
--border-color-2: rgb(235, 19, 19);
|
||||
|
||||
--border-color-flash-1: rgb(220, 32, 15);
|
||||
--border-color-flash-2: rgb(210, 220, 15);
|
||||
--border-color-flash-1: rgb(255, 27, 6);
|
||||
--border-color-flash-2: rgb(208, 218, 20);
|
||||
}
|
||||
|
||||
@@ -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
BIN
img/logo128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
39
js/app.js
39
js/app.js
@@ -1,5 +1,6 @@
|
||||
const subCount = document.getElementById("subCount");
|
||||
const frame = document.getElementById("frame");
|
||||
const tfBanner = document.getElementById("teafire-banner");
|
||||
|
||||
let subCountNumber = 0;
|
||||
|
||||
@@ -16,21 +17,51 @@ function updateSubCount() {
|
||||
|
||||
function sub(subName) {
|
||||
frame.style.animationName = "subAnimation";
|
||||
frame.style.animationDuration = "11s";
|
||||
frame.style.animationDuration = "2s";
|
||||
|
||||
subCount.style.animationName = "backgroundSubAnimation";
|
||||
subCount.style.animationDuration = "11s";
|
||||
subCount.style.animationDuration = "2s";
|
||||
|
||||
subCount.innerText = subName + " " + subCountNumber;
|
||||
|
||||
setTimeout(() => {
|
||||
frame.style.animationName = "borderAnimation";
|
||||
frame.style.animationDuration = "5s";
|
||||
frame.style.animationDuration = "20s";
|
||||
|
||||
subCount.style.animationName = "backgroundAnimation";
|
||||
subCount.style.animationDuration = "5s";
|
||||
subCount.style.animationDuration = "20s";
|
||||
subCount.innerText = subCountNumber;
|
||||
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();
|
||||
|
||||
Reference in New Issue
Block a user