Idea: have Emotes Fade out at the top of the Screen / A definable Height

[chrisspiegl]

I really like the Emotes Wall, especially the one where they float up.

Would it be possible to have them fade out toward the top of the browser source?

This would make it possible that the browser source could only cover part of the screen, and the emotes fade out when they reach the end (instead of being cut off).

Best, Chris

[chrisspiegl]

I was able to achieve this by using the custom CSS in obs and setting the y position key frames.

Please not, I do not know where y1 are used… I just tested this and found it did what I wanted. Probably y1 keyframes are used for the float up animation (which I am using) and maybe y are used for the bounce around?

Emote Wall URL & Custom CSS for OBS Browser Source for Floating Up Emote Wall which fade out when getting to the top of the browser source (does not have to cover the whole screen):

https://socialstream.ninja/emotes.html?session=SESSIONID&server&server2&server3&floatup

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

@keyframes y1 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    transform: translateY(calc(100vh + var(--width)));
    opacity: 1;
  }
}