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

v0.0.9

Browse Source
This commit is contained in:
Janis
2022-10-29 17:12:44 +02:00
parent a45f99ecd3
commit 5dd6bbf290
3 changed files with 8 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
css/animations.css
View File

@@ -1,13 +1,5 @@
@keyframes subAnimation { @keyframes subAnimation {
0% { 0% {
border-image: linear-gradient(
to top,
var(--border-color-1),
var(--border-color-2)
)
1;
}
10% {
border-image: linear-gradient( border-image: linear-gradient(
to top, to top,
var(--border-color-flash-1), var(--border-color-flash-1),
@@ -23,7 +15,7 @@
) )
1; 1;
} }
80% { 100% {
border-image: linear-gradient( border-image: linear-gradient(
to top, to top,
var(--border-color-flash-1), var(--border-color-flash-1),
@@ -31,14 +23,6 @@
) )
1; 1;
} }
100% {
border-image: linear-gradient(
to top,
var(--border-color-2),
var(--border-color-1)
)
1;
}
} }
@keyframes borderAnimation { @keyframes borderAnimation {
@@ -82,18 +66,12 @@
@keyframes backgroundSubAnimation { @keyframes backgroundSubAnimation {
0% { 0% {
background: var(--border-color-1);
}
10% {
background: var(--border-color-flash-1); background: var(--border-color-flash-1);
} }
50% { 50% {
background: var(--border-color-flash-2); background: var(--border-color-flash-2);
} }
80% { 100% {
background: var(--border-color-flash-1); background: var(--border-color-flash-1);
} }
100% {
background: var(--border-color-2);
}
} }

8
css/variables.css
View File

@@ -1,7 +1,7 @@
:root { :root {
--border-color-1: rgb(139, 0, 0); --border-color-1: rgb(113, 0, 0);
--border-color-2: rgb(255, 74, 74); --border-color-2: rgb(235, 19, 19);
--border-color-flash-1: rgb(220, 32, 15); --border-color-flash-1: rgb(255, 27, 6);
--border-color-flash-2: rgb(210, 220, 15); --border-color-flash-2: rgb(208, 218, 20);
} }

4
js/app.js
View File

@@ -16,10 +16,10 @@ function updateSubCount() {
function sub(subName) { function sub(subName) {
frame.style.animationName = "subAnimation"; frame.style.animationName = "subAnimation";
frame.style.animationDuration = "5s"; frame.style.animationDuration = "2s";
subCount.style.animationName = "backgroundSubAnimation"; subCount.style.animationName = "backgroundSubAnimation";
subCount.style.animationDuration = "5s"; subCount.style.animationDuration = "2s";
subCount.innerText = subName + " " + subCountNumber; subCount.innerText = subName + " " + subCountNumber;