Skip to content

Instantly share code, notes, and snippets.

@paulvonlecter
Created June 19, 2022 16:32
Show Gist options
  • Save paulvonlecter/2ca4f3f6571b86801c40b19a53e8ea02 to your computer and use it in GitHub Desktop.
Save paulvonlecter/2ca4f3f6571b86801c40b19a53e8ea02 to your computer and use it in GitHub Desktop.
Весёлое испытание для участников голосовых каналов в Discord, которое можно вывести в качестве оверлея на экран трансляции.
* {
margin:0;
padding:0;
}
html, body, div#app-mount, div#app-mount>div, .voice-container, .voice-container .voice-states, .voice-container .voice-states .voice-state {
display: block !important;
position: absolute!important;
top:0;bottom:0;left:0;right:0;
/* Размеры исходного изображения */
width: 800px!important;
height: 266px!important;
}
body {
background-image: url('https://cdn.discordapp.com/attachments/751787078085246976/988110792387870720/lab-15x5.png');
background-size: auto;
background-repeat: no-repeat;
background-attachment: fixed;
}
.voice-container .voice-states {
padding: 0;
}
.voice-container .voice-states .voice-state {
margin: 0;
box-sizing: border-box;
transform-origin: 50% 50%;
transform: translate(0,0);
}
.voice-container .voice-states .voice-state .avatar {
float: none;
offset-rotate: 0deg;
animation-name: moving;
animation-play-state: paused;
/* Сколько надо говорить секунд */
animation-duration: 60s;
/********************************/
animation-direction: alternate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: both;
/* Путь до выхода */
/* Остановки задаются в виде координат X Y через пробел */
offset-path: path("M 53 69 166 69 166 165 102 165 102 101 133 101 133 141 133 101 102 101 102 165 166 165 166 69 70 69 70 197 196 197 196 69 229 69 229 165 259 165 259 69 259 165 229 165 229 69 196 69 196 197 482 197 482 133 451 133 451 165 326 165 326 101 482 101 326 101 326 165 451 165 451 133 482 133 482 197 293 197 293 69 514 69 514 197 600 197");
}
.voice-container .voice-states .voice-state .user { display:none; }
.voice-container .voice-states .voice-state .avatar.speaking {
animation-play-state: running;
}
@keyframes moving {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment