BobHasNoSoul
commented
1 week ago This is actually awesome I didn't even think about mobile devices (most of the time I use desktop devices so rarely have a different aspect)
When I'm home later I will migrate this
On Thu, 4 Jul 2024, 12:12 Poiaman, @.***> wrote:
Me and my friend GPT made some ajustments to avoid error in aspectratio, probably you probably do better, but here is my contribution.
/* Animation
/ @Keyframes https://github.com/Keyframes backgroundScroll { 0% { background-position: 99% 1%; opacity: 0; filter: blur(0px); } 5% { opacity: 1; filter: blur(0px); } / Makes the image visible more quickly
/ 33% { background-position: 50% 50%; opacity: 1; filter: blur(0px); } 40% { background-position: 99% 99%; opacity: 0; filter: blur(0px); } 66% { background-position: 50% 50%; filter: blur(0px); } 75% { background-position: 1% 1%; filter: blur(0px); } 100% { background-position: 50% 50%; opacity: 0.5; filter: blur(5px); } / Lower opacity and more blur */ }
.backdropImage { background-size: cover; /* Completely fills the element while maintaining the aspect ratio
/ opacity: 0; background-position: center center; / Centers the image / animation: backgroundScroll 60s ease-in-out 0s; / Removes the 1s delay / filter: blur(0px); / Initially no blur */ }
/* Animation for mobile devices
/ @Keyframes https://github.com/Keyframes backgroundScrollmob { 0% { background-position: 99% 1%; opacity: 0; filter: blur(0px); } 5% { opacity: 1; filter: blur(0px); } / Makes the image visible more quickly
/ 33% { background-position: 50% 50%; opacity: 1; filter: blur(0px); } 40% { background-position: 1% 99%; opacity: 0; filter: blur(0px); } 66% { background-position: 99% 50%; filter: blur(0px); } 75% { background-position: 99% 99%; filter: blur(0px); } 100% { background-position: 50% 50%; opacity: 0.5; filter: blur(5px); } / Lower opacity and more blur */ }
@media https://github.com/media (max-width: 600px) { .backdropImage { background-size: cover; /* Completely fills the element while maintaining the aspect ratio
/ opacity: 0; background-position: center center; / Centers the image / animation: backgroundScrollmob 60s ease-in-out 0s; / Removes the 1s delay / filter: blur(0px); / Initially no blur */ } }
— Reply to this email directly, view it on GitHub https://github.com/BobHasNoSoul/jellyfin-mods/issues/30, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFPTXLA3AQPV2LNWRTBTZ7LZKUUZHAVCNFSM6AAAAABKLKQDQSVHI2DSMVQWIX3LMV43ASLTON2WKOZSGM4TANRQGY3DKNA . You are receiving this because you are subscribed to this thread.Message ID: @.***>
Me and my friend GPT made some ajustments to avoid error in aspectratio, you probably do better, but here is my contribution.
/ Animation / @keyframes backgroundScroll { 0% { background-position: 99% 1%; opacity: 0; filter: blur(0px); } 5% { opacity: 1; filter: blur(0px); } / Makes the image visible more quickly / 33% { background-position: 50% 50%; opacity: 1; filter: blur(0px); } 40% { background-position: 99% 99%; opacity: 0; filter: blur(0px); } 66% { background-position: 50% 50%; filter: blur(0px); } 75% { background-position: 1% 1%; filter: blur(0px); } 100% { background-position: 50% 50%; opacity: 0.5; filter: blur(5px); } / Lower opacity and more blur / }
.backdropImage { background-size: cover; / Completely fills the element while maintaining the aspect ratio / opacity: 0; background-position: center center; / Centers the image / animation: backgroundScroll 60s ease-in-out 0s; / Removes the 1s delay / filter: blur(0px); / Initially no blur / }
/ Animation for mobile devices / @keyframes backgroundScrollmob { 0% { background-position: 99% 1%; opacity: 0; filter: blur(0px); } 5% { opacity: 1; filter: blur(0px); } / Makes the image visible more quickly / 33% { background-position: 50% 50%; opacity: 1; filter: blur(0px); } 40% { background-position: 1% 99%; opacity: 0; filter: blur(0px); } 66% { background-position: 99% 50%; filter: blur(0px); } 75% { background-position: 99% 99%; filter: blur(0px); } 100% { background-position: 50% 50%; opacity: 0.5; filter: blur(5px); } / Lower opacity and more blur / }
@media (max-width: 600px) { .backdropImage { background-size: cover; / Completely fills the element while maintaining the aspect ratio / opacity: 0; background-position: center center; / Centers the image / animation: backgroundScrollmob 60s ease-in-out 0s; / Removes the 1s delay / filter: blur(0px); / Initially no blur / } }