CodeDevMLH/Jellyfin-Seasonals-Plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

Enhance underwater animation: add new creature types, improve movement animations, and implement light rays effect

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-26 21:52:36 +01:00
parent c6d04b9b3b
commit a162b30bcd
2 changed files with 277 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
Jellyfin.Plugin.Seasonals/Web/underwater.css
View File

@@ -62,16 +62,29 @@
z-index: 40;
}
@keyframes underwater-swim-right {
0% { transform: translateX(0) translateY(0) scaleX(-1); }
50% { transform: translateX(65vw) translateY(-5vh) scaleX(-1); }
100% { transform: translateX(130vw) translateY(0) scaleX(-1); }
@keyframes underwater-traverse-right {
0% { left: -25vw; }
100% { left: 125vw; }
}
@keyframes underwater-swim-left {
0% { transform: translateX(0) translateY(0); }
50% { transform: translateX(-65vw) translateY(5vh); }
100% { transform: translateX(-130vw) translateY(0); }
@keyframes underwater-traverse-left {
0% { left: 125vw; }
100% { left: -25vw; }
}
@keyframes underwater-traverse-up {
0% { top: 120vh; }
100% { top: -20vh; }
}
@keyframes underwater-traverse-down {
0% { top: -20vh; }
100% { top: 120vh; }
}
@keyframes underwater-sway-y {
0% { transform: translateY(-2vh); }
100% { transform: translateY(2vh); }
}
@keyframes underwater-sway {
@@ -86,3 +99,30 @@
90% { opacity: 0; }
100% { transform: translateY(-110vh) translateX(10px); opacity: 0; }
}
.underwater-god-rays {
position: absolute;
top: -50vh;
left: -50vw;
width: 200vw;
height: 200vh;
background: repeating-linear-gradient(
15deg,
rgba(255, 255, 255, 0.02) 0px,
rgba(255, 255, 255, 0.05) 100px,
transparent 100px,
transparent 300px
);
animation: god-rays-sway 20s ease-in-out infinite alternate;
pointer-events: none;
z-index: 12;
transform-origin: top center;
mix-blend-mode: overlay;
filter: blur(5px);
}
@keyframes god-rays-sway {
0% { transform: rotate(-3deg) translateX(-5%); opacity: 0.4; }
50% { opacity: 0.8; }
100% { transform: rotate(3deg) translateX(5%); opacity: 0.4; }
}