Svelte – svelte-body

---

BodyComp.svelte

<script>
	let hereKitty = false;

	const handleMouseenter = () => hereKitty = true;
	const handleMouseleave = () => hereKitty = false;
</script>

<svelte:body
	on:mouseenter={handleMouseenter}
	on:mouseleave={handleMouseleave}
/>

<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
<img
	class:curious={hereKitty}
	alt="Kitten wants to know what's going on"
	src="https://svelte.dev/tutorial/kitten.png"
>

<style>
	img {
		position: relative;
		left: 0;
		bottom: -60px;
		transform: translate(-80%, 0) rotate(-30deg);
		transform-origin: 100% 100%;
		transition: transform 0.4s;
	}

	.curious {
		transform: translate(-15%, 0) rotate(0deg);
	}
</style>

App.svelte

	<ElementComp />
	<WindowComp />
	<!-- <WindowBindingComp /> -->
	<BodyComp />

dan hasilnya akan seperti ini …

Okay berhasil ya… source code ada disini … cyaaa ..