http://www.home-chen.com/en 2026-09-03T14:32:41+08:00 Home-Chen Joomla! - Open Source Content Management - Version 6.1.3 2026-08-22T17:30:12+08:00 2026-08-22T17:30:12+08:00 http://www.home-chen.com/en/home Joomla

<!-- Placeholder with initial dimensions to prevent layout collapse during animation --> <div class="img-placeholder"> <div id="animateBox" class="morph-box"><img class="img-front" src="http://www.home-chen.com/images/bg3.jpg" alt="Original image"> <img class="img-back" src="http://www.home-chen.com/images/bg4.jpg" alt="Morphed image"></div> </div> <p> <script> const box = document.getElementById('animateBox'); let isFullscreen = false; box.addEventListener('click', () => { if (!isFullscreen) { // 1. TURN OFF transition temporarily so the setup doesn't animate box.style.transition = 'none'; // 2. Get coordinates and pin to fixed position const rect = box.getBoundingClientRect(); box.style.position = 'fixed'; box.style.top = rect.top + 'px'; box.style.left = rect.left + 'px'; box.style.width = rect.width + 'px'; box.style.height = rect.height + 'px'; // 3. Force browser repaint to lock in the exact starting position box.offsetHeight; // 4. TURN ON transition again (removes inline style, falling back to CSS) box.style.transition = ''; // 5. Trigger the zoom box.classList.add('fullscreen'); document.body.style.overflow = 'hidden'; } else { // 1. Trigger the zoom out (reverting to the pinned coordinates) box.classList.remove('fullscreen'); document.body.style.overflow = ''; // 2. Wait 2 seconds for animation to finish setTimeout(() => { if (!box.classList.contains('fullscreen')) { // Turn off transition briefly while restoring the document flow box.style.transition = 'none'; box.style.position = 'relative'; box.style.top = 'auto'; box.style.left = 'auto'; box.style.width = '100%'; box.style.height = '100%'; box.offsetHeight; // Force repaint box.style.transition = ''; // Restore transition for next click } }, 2000); } isFullscreen = !isFullscreen; }); </script> </p>

<!-- Placeholder with initial dimensions to prevent layout collapse during animation --> <div class="img-placeholder"> <div id="animateBox" class="morph-box"><img class="img-front" src="http://www.home-chen.com/images/bg3.jpg" alt="Original image"> <img class="img-back" src="http://www.home-chen.com/images/bg4.jpg" alt="Morphed image"></div> </div> <p> <script> const box = document.getElementById('animateBox'); let isFullscreen = false; box.addEventListener('click', () => { if (!isFullscreen) { // 1. TURN OFF transition temporarily so the setup doesn't animate box.style.transition = 'none'; // 2. Get coordinates and pin to fixed position const rect = box.getBoundingClientRect(); box.style.position = 'fixed'; box.style.top = rect.top + 'px'; box.style.left = rect.left + 'px'; box.style.width = rect.width + 'px'; box.style.height = rect.height + 'px'; // 3. Force browser repaint to lock in the exact starting position box.offsetHeight; // 4. TURN ON transition again (removes inline style, falling back to CSS) box.style.transition = ''; // 5. Trigger the zoom box.classList.add('fullscreen'); document.body.style.overflow = 'hidden'; } else { // 1. Trigger the zoom out (reverting to the pinned coordinates) box.classList.remove('fullscreen'); document.body.style.overflow = ''; // 2. Wait 2 seconds for animation to finish setTimeout(() => { if (!box.classList.contains('fullscreen')) { // Turn off transition briefly while restoring the document flow box.style.transition = 'none'; box.style.position = 'relative'; box.style.top = 'auto'; box.style.left = 'auto'; box.style.width = '100%'; box.style.height = '100%'; box.offsetHeight; // Force repaint box.style.transition = ''; // Restore transition for next click } }, 2000); } isFullscreen = !isFullscreen; }); </script> </p>