mirror of
https://github.com/DerTyp7/obs-twitch-camera-frame.git
synced 2025-10-29 12:52:14 +01:00
added particles
This commit is contained in:
Janis
@@ -56,7 +56,7 @@ html {
|
|||||||
animation-name: backgroundAnimation;
|
animation-name: backgroundAnimation;
|
||||||
}
|
}
|
||||||
|
|
||||||
#teafire-banner {
|
#tealfire-banner {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
@@ -66,16 +66,23 @@ html {
|
|||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
#teafire-banner p {
|
#tealfire-banner p {
|
||||||
color: teal;
|
color: teal;
|
||||||
float: left;
|
float: left;
|
||||||
font-size: 23pt;
|
font-size: 23pt;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
|
z-index: 5;
|
||||||
}
|
}
|
||||||
#teafire-banner img {
|
#tealfire-banner img {
|
||||||
color: teal;
|
color: teal;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#tealfire-banner .particles-js-canvas-el {
|
||||||
|
margin-top: -60px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|||||||
@@ -11,13 +11,16 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="frame"></div>
|
<div id="frame"></div>
|
||||||
<div id="teafire-banner">
|
<div id="tealfire-banner">
|
||||||
<img src="img/logo128x128.png" alt="" />
|
<img src="img/logo128x128.png" alt="" />
|
||||||
<p>TealFire</p>
|
<p>TealFire</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="subCount">0</div>
|
<div id="subCount">0</div>
|
||||||
|
<div id="particles-frame"></div>
|
||||||
|
|
||||||
<script src="config.js"></script>
|
<script src="config.js"></script>
|
||||||
<script src="js/socket.io.min.js"></script>
|
<script src="js/modules/socket.io.min.js"></script>
|
||||||
|
<script src="js/modules/particles/particles.js"></script>
|
||||||
<script src="js/app.js"></script>
|
<script src="js/app.js"></script>
|
||||||
<script src="js/socket.js"></script>
|
<script src="js/socket.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
12
js/app.js
12
js/app.js
@@ -1,6 +1,6 @@
|
|||||||
const subCount = document.getElementById("subCount");
|
const subCount = document.getElementById("subCount");
|
||||||
const frame = document.getElementById("frame");
|
const frame = document.getElementById("frame");
|
||||||
const tfBanner = document.getElementById("teafire-banner");
|
const tfBanner = document.getElementById("tealfire-banner");
|
||||||
|
|
||||||
let subCountNumber = 0;
|
let subCountNumber = 0;
|
||||||
|
|
||||||
@@ -16,6 +16,8 @@ function updateSubCount() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function sub(subName) {
|
function sub(subName) {
|
||||||
|
particlesJS.load("particles-frame", "js/particles-sub.json");
|
||||||
|
|
||||||
frame.style.animationName = "subAnimation";
|
frame.style.animationName = "subAnimation";
|
||||||
frame.style.animationDuration = "2s";
|
frame.style.animationDuration = "2s";
|
||||||
|
|
||||||
@@ -32,6 +34,8 @@ function sub(subName) {
|
|||||||
subCount.style.animationDuration = "20s";
|
subCount.style.animationDuration = "20s";
|
||||||
subCount.innerText = subCountNumber;
|
subCount.innerText = subCountNumber;
|
||||||
updateSubCount();
|
updateSubCount();
|
||||||
|
console.log(particlesJS);
|
||||||
|
particlesJS.load("particles-frame", "js/particles-none.json");
|
||||||
}, 11000);
|
}, 11000);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -62,6 +66,8 @@ setInterval(() => {
|
|||||||
showTealFireBanner();
|
showTealFireBanner();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
closeTealFireBanner();
|
closeTealFireBanner();
|
||||||
}, 20000);
|
}, 20000); //20000
|
||||||
}, 300000);
|
}, 300000); // 300000
|
||||||
updateSubCount();
|
updateSubCount();
|
||||||
|
|
||||||
|
particlesJS.load("tealfire-banner", "js/particles-banner.json");
|
||||||
|
|||||||
22
js/modules/particles/bower.json
Normal file
22
js/modules/particles/bower.json
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "particles.js",
|
||||||
|
"main": "particles.js",
|
||||||
|
"version": "2.0.0",
|
||||||
|
"homepage": "https://github.com/VincentGarreau/particles.js",
|
||||||
|
"authors": [
|
||||||
|
"Vincent Garreau <vin.garreau@gmail.com>"
|
||||||
|
],
|
||||||
|
"description": "A lightweight JavaScript library for creating particles.",
|
||||||
|
"keywords": [
|
||||||
|
"particle",
|
||||||
|
"particles"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"test",
|
||||||
|
"tests"
|
||||||
|
]
|
||||||
|
}
|
||||||
28
js/modules/particles/package.json
Normal file
28
js/modules/particles/package.json
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "particles.js",
|
||||||
|
"version": "2.0.0",
|
||||||
|
"description": "A lightweight JavaScript library for creating particles",
|
||||||
|
"homepage": "http://vincentgarreau.com/particles.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/VincentGarreau/particles.js.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"particles",
|
||||||
|
"particle",
|
||||||
|
"canvas"
|
||||||
|
],
|
||||||
|
"author": "Vincent Garreau",
|
||||||
|
"license": "MIT",
|
||||||
|
"files": [
|
||||||
|
"particles.js",
|
||||||
|
"particles.min.js"
|
||||||
|
],
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/VincentGarreau/particles.js/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/VincentGarreau/particles.js"
|
||||||
|
}
|
||||||
1541
js/modules/particles/particles.js
Normal file
1541
js/modules/particles/particles.js
Normal file
File diff suppressed because it is too large
Load Diff
9
js/modules/particles/particles.min.js
vendored
Normal file
9
js/modules/particles/particles.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
110
js/particles-banner.json
Normal file
110
js/particles-banner.json
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
{
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 400,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#00d680"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "img/github.svg",
|
||||||
|
"width": 100,
|
||||||
|
"height": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0.7,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 2,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"size_min": 0.3,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": false,
|
||||||
|
"distance": 150,
|
||||||
|
"color": "#d60e00",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 0.3,
|
||||||
|
"direction": "none",
|
||||||
|
"random": true,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"bounce": false,
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 600
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "bubble"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 200,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 10,
|
||||||
|
"size": 0,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 0,
|
||||||
|
"speed": 1
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 400,
|
||||||
|
"duration": 0.4
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 2
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true
|
||||||
|
}
|
||||||
110
js/particles-none.json
Normal file
110
js/particles-none.json
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
{
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 0,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#fff"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#fff"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "img/github.svg",
|
||||||
|
"width": 100,
|
||||||
|
"height": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 0,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 4,
|
||||||
|
"size_min": 0.3,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": false,
|
||||||
|
"distance": 150,
|
||||||
|
"color": "#d60e00",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 1,
|
||||||
|
"direction": "none",
|
||||||
|
"random": true,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"bounce": false,
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 600
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "bubble"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 400,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 250,
|
||||||
|
"size": 0,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 0,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 400,
|
||||||
|
"duration": 0.4
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true
|
||||||
|
}
|
||||||
110
js/particles-sub.json
Normal file
110
js/particles-sub.json
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
{
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 200,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#d67d00"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "img/github.svg",
|
||||||
|
"width": 100,
|
||||||
|
"height": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 1,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 2,
|
||||||
|
"opacity_min": 0,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 3,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 2,
|
||||||
|
"size_min": 0.3,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": false,
|
||||||
|
"distance": 150,
|
||||||
|
"color": "#d60e00",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 2,
|
||||||
|
"direction": "none",
|
||||||
|
"random": true,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"bounce": false,
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 600
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "bubble"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 400,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 250,
|
||||||
|
"size": 0,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 0,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 400,
|
||||||
|
"duration": 0.4
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user