Add spring animation effects with CSS and JavaScript implementation
This commit is contained in:
CodeDevMLH
245
Jellyfin.Plugin.Seasonals/Web/spring.js
Normal file
245
Jellyfin.Plugin.Seasonals/Web/spring.js
Normal file
@@ -0,0 +1,245 @@
|
||||
const config = window.SeasonalsPluginConfig?.Spring || {};
|
||||
|
||||
const spring = config.EnableSpring !== undefined ? config.EnableSpring : true;
|
||||
const petalCount = config.PetalCount || 25;
|
||||
const pollenCount = config.PollenCount || 15;
|
||||
const ladybugCountConfig = config.LadybugCount || 5;
|
||||
const sunbeamCount = config.SunbeamCount || 5;
|
||||
|
||||
const randomSpring = config.EnableRandomSpring !== undefined ? config.EnableRandomSpring : true;
|
||||
const randomSpringMobile = config.EnableRandomSpringMobile !== undefined ? config.EnableRandomSpringMobile : false;
|
||||
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
|
||||
const enablePetals = config.EnableSpringPetals !== undefined ? config.EnableSpringPetals : true;
|
||||
const enableSunbeams = config.EnableSpringSunbeams !== undefined ? config.EnableSpringSunbeams : true;
|
||||
|
||||
let msgPrinted = false;
|
||||
|
||||
function toggleSpring() {
|
||||
const springContainer = document.querySelector('.spring-container');
|
||||
if (!springContainer) return;
|
||||
|
||||
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
||||
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
||||
const isDashboard = document.body.classList.contains('dashboardDocument');
|
||||
const hasUserMenu = document.querySelector('#app-user-menu');
|
||||
|
||||
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
|
||||
springContainer.style.display = 'none';
|
||||
if (!msgPrinted) {
|
||||
console.log('Spring hidden');
|
||||
msgPrinted = true;
|
||||
}
|
||||
} else {
|
||||
springContainer.style.display = 'block';
|
||||
if (msgPrinted) {
|
||||
console.log('Spring visible');
|
||||
msgPrinted = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(toggleSpring);
|
||||
observer.observe(document.body, { childList: true, subtree: true, attributes: true });
|
||||
|
||||
function createPetal(container) {
|
||||
if (!enablePetals) return;
|
||||
|
||||
const petal = document.createElement('div');
|
||||
petal.classList.add('spring-petal');
|
||||
|
||||
const type = Math.random() > 0.5 ? 'type1' : 'type2';
|
||||
petal.classList.add(type);
|
||||
|
||||
const color = Math.random() > 0.7 ? 'darker' : 'lighter';
|
||||
petal.classList.add(color);
|
||||
|
||||
const randomLeft = Math.random() * 100;
|
||||
petal.style.left = `${randomLeft}%`;
|
||||
|
||||
const size = Math.random() * 0.5 + 0.5;
|
||||
petal.style.transform = `scale(${size})`;
|
||||
|
||||
const duration = Math.random() * 5 + 8;
|
||||
const delay = Math.random() * 10;
|
||||
const swayDuration = Math.random() * 2 + 2;
|
||||
|
||||
if (enableDifferentDuration) {
|
||||
petal.style.animationDuration = `${duration}s, ${swayDuration}s`;
|
||||
}
|
||||
petal.style.animationDelay = `${delay}s, ${Math.random() * 3}s`;
|
||||
|
||||
container.appendChild(petal);
|
||||
}
|
||||
|
||||
function createPollen(container) {
|
||||
const pollen = document.createElement('div');
|
||||
pollen.classList.add('spring-pollen');
|
||||
|
||||
const startY = Math.random() * 60 + 20;
|
||||
pollen.style.top = `${startY}%`;
|
||||
pollen.style.left = `${Math.random() * 100}%`;
|
||||
|
||||
const size = Math.random() * 3 + 1;
|
||||
pollen.style.width = `${size}px`;
|
||||
pollen.style.height = `${size}px`;
|
||||
|
||||
const duration = Math.random() * 20 + 20;
|
||||
pollen.style.animationDuration = `${duration}s`;
|
||||
pollen.style.animationDelay = `-${Math.random() * 20}s`;
|
||||
|
||||
container.appendChild(pollen);
|
||||
}
|
||||
|
||||
function createSunbeam(container) {
|
||||
if (!enableSunbeams) return;
|
||||
|
||||
const beam = document.createElement('div');
|
||||
beam.classList.add('spring-sunbeam');
|
||||
|
||||
const left = Math.random() * 100; // Spread across full width
|
||||
beam.style.left = `${left}%`;
|
||||
|
||||
// Thinner beams as requested
|
||||
const width = Math.random() * 20 + 10; // 10-30px wide
|
||||
beam.style.width = `${width}px`;
|
||||
|
||||
const rotate = Math.random() * 20 - 10 + 45;
|
||||
beam.style.transform = `rotate(${rotate}deg)`;
|
||||
|
||||
const duration = Math.random() * 10 + 10;
|
||||
beam.style.animationDuration = `${duration}s`;
|
||||
beam.style.animationDelay = `-${Math.random() * 10}s`;
|
||||
|
||||
container.appendChild(beam);
|
||||
}
|
||||
|
||||
function createGrass(container) {
|
||||
let grassContainer = container.querySelector('.spring-grass-container');
|
||||
if (!grassContainer) {
|
||||
grassContainer = document.createElement('div');
|
||||
grassContainer.className = 'spring-grass-container';
|
||||
container.appendChild(grassContainer);
|
||||
}
|
||||
|
||||
// More grass: 1 blade every 3px (was 15px)
|
||||
const bladeCount = window.innerWidth / 3;
|
||||
for (let i = 0; i < bladeCount; i++) {
|
||||
const blade = document.createElement('div');
|
||||
blade.classList.add('spring-grass');
|
||||
|
||||
const height = Math.random() * 40 + 20; // 20-60px height
|
||||
blade.style.height = `${height}px`;
|
||||
blade.style.left = `${i * 3 + Math.random() * 2}px`;
|
||||
|
||||
const duration = Math.random() * 2 + 3;
|
||||
blade.style.animationDuration = `${duration}s`;
|
||||
blade.style.animationDelay = `-${Math.random() * 5}s`;
|
||||
|
||||
const hue = 100 + Math.random() * 40;
|
||||
blade.style.backgroundColor = `hsl(${hue}, 60%, 40%)`;
|
||||
|
||||
grassContainer.appendChild(blade);
|
||||
}
|
||||
|
||||
// Add Ladybugs
|
||||
const bugs = ladybugCountConfig;
|
||||
for (let i = 0; i < bugs; i++) {
|
||||
createLadybug(grassContainer);
|
||||
}
|
||||
}
|
||||
|
||||
function createLadybug(container) {
|
||||
const bug = document.createElement('div');
|
||||
bug.classList.add('spring-ladybug');
|
||||
|
||||
const direction = Math.random() > 0.5 ? 'right' : 'left';
|
||||
bug.classList.add(direction);
|
||||
|
||||
// Position lower (bottom of grass), but ensure visibility
|
||||
const bottomOffset = direction === 'right' ? Math.random() * 5 + 6 : Math.random() * 5 + 2;
|
||||
bug.style.bottom = `${bottomOffset}px`;
|
||||
|
||||
// Start position depends on direction
|
||||
if (direction === 'right') {
|
||||
bug.style.left = '-5%'; // Start off-screen left
|
||||
} else {
|
||||
bug.style.left = '105%'; // Start off-screen right
|
||||
}
|
||||
|
||||
const duration = Math.random() * 20 + 20; // Slow crawl
|
||||
bug.style.animationDuration = `${duration}s`;
|
||||
bug.style.animationDelay = `-${Math.random() * 20}s`;
|
||||
|
||||
container.appendChild(bug);
|
||||
}
|
||||
|
||||
function addRandomSpringObjects() {
|
||||
const container = document.querySelector('.spring-container');
|
||||
if (!container) return;
|
||||
|
||||
if (enablePetals) {
|
||||
for (let i = 0; i < petalCount; i++) {
|
||||
createPetal(container);
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < pollenCount; i++) {
|
||||
createPollen(container);
|
||||
}
|
||||
}
|
||||
|
||||
function initSpringObjects() {
|
||||
let container = document.querySelector('.spring-container');
|
||||
if (!container) {
|
||||
container = document.createElement("div");
|
||||
container.className = "spring-container";
|
||||
container.setAttribute("aria-hidden", "true");
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
createGrass(container);
|
||||
|
||||
if (enablePetals) {
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const petal = document.createElement('div');
|
||||
petal.classList.add('spring-petal');
|
||||
const type = Math.random() > 0.5 ? 'type1' : 'type2';
|
||||
petal.classList.add(type);
|
||||
const color = Math.random() > 0.7 ? 'darker' : 'lighter';
|
||||
petal.classList.add(color);
|
||||
const randomLeft = Math.random() * 100;
|
||||
petal.style.left = `${randomLeft}%`;
|
||||
const size = Math.random() * 0.5 + 0.5;
|
||||
petal.style.transform = `scale(${size})`;
|
||||
|
||||
const duration = Math.random() * 5 + 8;
|
||||
const swayDuration = Math.random() * 2 + 2;
|
||||
|
||||
if (enableDifferentDuration) {
|
||||
petal.style.animationDuration = `${duration}s, ${swayDuration}s`;
|
||||
}
|
||||
petal.style.animationDelay = `-${Math.random() * 10}s, -${Math.random() * 3}s`;
|
||||
container.appendChild(petal);
|
||||
}
|
||||
}
|
||||
|
||||
if (enableSunbeams) {
|
||||
// Initial sunbeams
|
||||
for (let i = 0; i < sunbeamCount; i++) {
|
||||
createSunbeam(container);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initializeSpring() {
|
||||
if (!spring) return;
|
||||
initSpringObjects();
|
||||
toggleSpring();
|
||||
|
||||
const screenWidth = window.innerWidth;
|
||||
if (randomSpring && (screenWidth > 768 || randomSpringMobile)) {
|
||||
addRandomSpringObjects();
|
||||
}
|
||||
}
|
||||
|
||||
initializeSpring();
|
||||
Reference in New Issue
Block a user