<?xml version="1.0" encoding="utf-8"?>
<!-- generator="Joomla! - Open Source Content Management - Version 6.1.3" -->
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>Home</title>
		<description><![CDATA[]]></description>
		<link>http://www.home-chen.com/en</link>
		<lastBuildDate>Thu, 03 Sep 2026 14:32:41 +0800</lastBuildDate>
		<generator>Joomla! - Open Source Content Management - Version 6.1.3</generator>
		<atom:link rel="self" type="application/rss+xml" href="http://www.home-chen.com/en?format=feed&amp;type=rss"/>
		<language>en-gb</language>
		<item>
			<title>Home</title>
			<link>http://www.home-chen.com/en/home</link>
			<guid isPermaLink="true">http://www.home-chen.com/en/home</guid>
			<description><![CDATA[<!-- 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>]]></description>
			<category>Category (en-gb)</category>
			<pubDate>Sat, 22 Aug 2026 17:30:12 +0800</pubDate>
		</item>
	</channel>
</rss>
