Arxcis/bytt-kanal-animasjon.html

## bytt-kanal-animasjon.html
<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
    }
    #a,#b,#c,#d {
        height: 100vh;
    }
    #b {
        background: radial-gradient(at top right,#796bf2,#572f91);
    }
    #c {
        background: radial-gradient(at top right,#ea6037,#d62c3f);
    }
    #tv {
        position: sticky;
        top: 195px;
        overflow: hidden;
        height: 510px;

        display: flex;
        justify-content: flex-end;
        margin-right: 50px;
    }
    #x,#y,#z {
        position: absolute;
        overflow: hidden;
    }
    #x {
        z-index: 3;
    }
    #y {
        z-index: 2;
    }
    #z {
        z-index: 1;
    }
    img {
        overflow: hidden;
    }
</style>
</head>
<body>
    <section id="tv">
        <section id="x"><img id="x-child" src="https://www.apple.com/v/apple-tv-4k/aa/images/overview/rooms/screen_tv_plus__bd2qqerq7sz6_large.jpg"/></section>
        <section id="y"><img id="y-child" height="510" width="906" src="https://www.apple.com/euro/iphone/home/j/screens_alt/images/overview/hero/iphone_14_hero__ceub5xriecgi_large.jpg"/></section>
        <section id="z"><img id="z-child" src="https://www.apple.com/v/apple-tv-4k/aa/images/overview/rooms/screen_tv_plus__bd2qqerq7sz6_large.jpg"/></section>
    </section>
    <section id="a"></section>
    <section id="b"></section>
    <section id="c"></section>
    <section id="d"></section>
</body>
<script>
window.addEventListener("scroll", e => {
    const tv = document.querySelector("#tv").getBoundingClientRect()

    const x = document.querySelector("#x")
    const y = document.querySelector("#y")
    const z = document.querySelector("#z")
    const xChild = document.querySelector("#x-child")
    const yChild = document.querySelector("#y-child")
    const zChild = document.querySelector("#z-child")

    const b = document.querySelector("#b").getBoundingClientRect()
    const c = document.querySelector("#c").getBoundingClientRect()
    const d = document.querySelector("#d").getBoundingClientRect()

    {
        const diff = Math.round(b.top - tv.bottom) - 4
        x.style.transform = `matrix(1,0,0,1,0,${Math.min(0, diff)})`
        xChild.style.transform = `matrix(1,0,0,1,0,${-(Math.min(0, diff))})`
    }
    {
        const diff = Math.round(c.top - tv.bottom) - 5
        y.style.transform = `matrix(1,0,0,1,0,${Math.min(0, diff)})`
        yChild.style.transform = `matrix(1,0,0,1,0,${-(Math.min(0, diff))})`
    }
    {
        const diff = Math.round(d.top - tv.bottom) - 5
        z.style.transform = `matrix(1,0,0,1,0,${Math.min(0, diff)})`
        zChild.style.transform = `matrix(1,0,0,1,0,${-(Math.min(0, diff))})`
    }
})
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	margin: 0;
	}
	#a,#b,#c,#d {
	height: 100vh;
	}
	#b {
	background: radial-gradient(at top right,#796bf2,#572f91);
	}
	#c {
	background: radial-gradient(at top right,#ea6037,#d62c3f);
	}
	#tv {
	position: sticky;
	top: 195px;
	overflow: hidden;
	height: 510px;

	display: flex;
	justify-content: flex-end;
	margin-right: 50px;
	}
	#x,#y,#z {
	position: absolute;
	overflow: hidden;
	}
	#x {
	z-index: 3;
	}
	#y {
	z-index: 2;
	}
	#z {
	z-index: 1;
	}
	img {
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<section id="tv">
	<section id="x"><img id="x-child" src="https://www.apple.com/v/apple-tv-4k/aa/images/overview/rooms/screen_tv_plus__bd2qqerq7sz6_large.jpg"/></section>
	<section id="y"><img id="y-child" height="510" width="906" src="https://www.apple.com/euro/iphone/home/j/screens_alt/images/overview/hero/iphone_14_hero__ceub5xriecgi_large.jpg"/></section>
	<section id="z"><img id="z-child" src="https://www.apple.com/v/apple-tv-4k/aa/images/overview/rooms/screen_tv_plus__bd2qqerq7sz6_large.jpg"/></section>
	</section>
	<section id="a"></section>
	<section id="b"></section>
	<section id="c"></section>
	<section id="d"></section>
	</body>
	<script>
	window.addEventListener("scroll", e => {
	const tv = document.querySelector("#tv").getBoundingClientRect()

	const x = document.querySelector("#x")
	const y = document.querySelector("#y")
	const z = document.querySelector("#z")
	const xChild = document.querySelector("#x-child")
	const yChild = document.querySelector("#y-child")
	const zChild = document.querySelector("#z-child")

	const b = document.querySelector("#b").getBoundingClientRect()
	const c = document.querySelector("#c").getBoundingClientRect()
	const d = document.querySelector("#d").getBoundingClientRect()

	{
	const diff = Math.round(b.top - tv.bottom) - 4
	x.style.transform = `matrix(1,0,0,1,0,${Math.min(0, diff)})`
	xChild.style.transform = `matrix(1,0,0,1,0,${-(Math.min(0, diff))})`
	}
	{
	const diff = Math.round(c.top - tv.bottom) - 5
	y.style.transform = `matrix(1,0,0,1,0,${Math.min(0, diff)})`
	yChild.style.transform = `matrix(1,0,0,1,0,${-(Math.min(0, diff))})`
	}
	{
	const diff = Math.round(d.top - tv.bottom) - 5
	z.style.transform = `matrix(1,0,0,1,0,${Math.min(0, diff)})`
	zChild.style.transform = `matrix(1,0,0,1,0,${-(Math.min(0, diff))})`
	}
	})
	</script>
	</html>