|
|
| Line 7: |
Line 7: |
| link.href = '/images/favicon.png'; | | link.href = '/images/favicon.png'; |
| document.getElementsByTagName('head')[0].appendChild(link); | | document.getElementsByTagName('head')[0].appendChild(link); |
|
| |
| // PARALLAX SCROLL WITH JS (GREENSKINS)
| |
| document.addEventListener('DOMContentLoaded', function () {
| |
| // Only run on desktop
| |
| if (window.innerWidth <= 768) return;
| |
|
| |
| const container = document.querySelector('.parallax-bg-container');
| |
| if (!container) return;
| |
|
| |
| const back = container.querySelector('.layer-back');
| |
| const mid = container.querySelector('.layer-mid');
| |
| const front = container.querySelector('.layer-front');
| |
|
| |
| // Initial styles
| |
| container.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-1; perspective:1000px; overflow:hidden; pointer-events:none;';
| |
| [back, mid, front].forEach(layer => {
| |
| layer.style.cssText = 'position:fixed; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; width:100%; height:100%;';
| |
| });
| |
|
| |
| // Set images + depth
| |
| back.style.backgroundImage = 'url("/images/2/21/GreenskinsBG.png")';
| |
| back.style.transform = 'translateZ(-400px) scale(1.5)';
| |
| back.style.zIndex = '1';
| |
|
| |
| mid.style.backgroundImage = 'url("/images/4/49/Greenskins1.png")';
| |
| mid.style.transform = 'translateZ(-200px) scale(1.3)';
| |
| mid.style.zIndex = '2';
| |
|
| |
| front.style.backgroundImage = 'url("/images/2/26/Greenskins2.png")';
| |
| front.style.transform = 'translateZ(0) scale(1)';
| |
| front.style.zIndex = '3';
| |
|
| |
| // Scroll handler
| |
| let ticking = false;
| |
| function updateParallax() {
| |
| const scroll = window.scrollY;
| |
|
| |
| back.style.transform = `translateZ(-400px) scale(1.5) translateY(${scroll * 0.3}px)`;
| |
| mid.style.transform = `translateZ(-200px) scale(1.3) translateY(${scroll * 0.5}px)`;
| |
| front.style.transform = `translateZ(0) scale(1) translateY(${scroll * 0.7}px)`;
| |
|
| |
| ticking = false;
| |
| }
| |
|
| |
| window.addEventListener('scroll', () => {
| |
| if (!ticking) {
| |
| requestAnimationFrame(updateParallax);
| |
| ticking = true;
| |
| }
| |
| });
| |
|
| |
| // Initial call
| |
| updateParallax();
| |
| });
| |
