(function () { 'use strict'; /* ---- slide data ---- */ var slides = [ { eyebrow: 'Smart Energy Solutions', headline: 'Residential Energy Solutions', body: 'TH Elements provides integrated residential energy solutions combining photovoltaic systems with advanced lithium battery storage, achieving efficient energy use, reducing electricity costs, and delivering stable, reliable power for modern homes.', cta: 'Learn More', href: 'https://blueviolet-coyote-615616.hostingersite.com/residential-solutions/' }, { eyebrow: 'Smart Energy Solutions', headline: 'Commercial & Industrial Energy Solutions', body: 'Our commercial and industrial energy storage systems help businesses optimize their energy structure, reduce operating costs, and improve energy efficiency, with broad applications in industrial manufacturing, commercial facilities, and infrastructure projects.', cta: 'Learn More', href: 'https://blueviolet-coyote-615616.hostingersite.com/commercial-industrial/' }, { eyebrow: 'Smart Energy Solutions', headline: 'Power Battery Application Scenarios', body: 'TH Elements provides high-performance lithium battery solutions, widely used in electric vehicles, robots, drones, and various industrial equipment, delivering stable and lasting power support.', cta: 'Learn More', href: 'https://blueviolet-coyote-615616.hostingersite.com/power-battery-applications/' } ]; var panel = document.getElementById('th-sol-panel'); var sentinels = document.querySelectorAll('.th-sol-sentinel'); var currentIdx = -1; var swapTimer = null; /* ---- build inner HTML for a slide ---- */ function buildHTML(s) { return ( '

' + s.eyebrow + '

' + '

' + s.headline + '

' + '

' + s.body + '

' + '' + '' + s.cta + '' + '→' + '' ); } /* ---- swap panel content with fade animation ---- */ function swapPanel(idx) { if (idx === currentIdx || !panel) return; currentIdx = idx; if (swapTimer) clearTimeout(swapTimer); /* fade out */ panel.classList.add('th-sol-hidden'); swapTimer = setTimeout(function () { panel.innerHTML = buildHTML(slides[idx]); /* reattach transition style after reflow */ panel.classList.remove('th-sol-hidden'); }, 300); } /* ---- determine active slide from scroll position ---- */ function getActiveIndex() { var triggerY = window.innerHeight * 0.55; /* 55% from viewport top */ var active = 0; for (var i = 0; i < sentinels.length; i++) { var rect = sentinels[i].getBoundingClientRect(); if (rect.top <= triggerY) { active = parseInt(sentinels[i].getAttribute('data-index'), 10); } } return active; } /* ---- scroll handler ---- */ function onScroll() { swapPanel(getActiveIndex()); } /* ---- init ---- */ function init() { if (!panel || sentinels.length === 0) return; /* ensure CSS transition is applied */ panel.style.transition = 'opacity 0.42s ease, transform 0.42s ease'; /* run once to set correct initial state */ var initial = getActiveIndex(); currentIdx = initial; /* skip animation on first load */ panel.innerHTML = buildHTML(slides[initial]); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); } /* wait for DOM ready */ if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } }());