Echo Writes Code

tile-tilt.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
function balatrofy() {
	const TILE_SELECTOR = '.tiles li';
	const HORIZONTAL_TILT_AMOUNT = 20;
	const VERTICAL_TILT_AMOUNT = 20;

	const tiles = document.querySelectorAll(TILE_SELECTOR);
	let tileIndex = 0;

	for (const tile of tiles) {
		tile.style.setProperty('--tile-animation-offset', `${tileIndex}s`);
		++tileIndex;

		const halfTileWidth = tile.offsetWidth / 2;
		const halfTileHeight = tile.offsetHeight / 2;

		tile.addEventListener('mousemove', (e) => {
			const relativeX = e.pageX - (tile.offsetLeft + halfTileWidth);
			const relativeY = e.pageY - (tile.offsetTop + halfTileHeight);

			const horizontalAlpha = relativeX / halfTileWidth;
			const horizontalTilt = `${-horizontalAlpha * HORIZONTAL_TILT_AMOUNT}deg`;
			tile.style.setProperty('--horizontal-tilt', horizontalTilt);

			const verticalAlpha = relativeY / halfTileHeight;
			const verticalTilt = `${verticalAlpha * VERTICAL_TILT_AMOUNT}deg`;
			tile.style.setProperty('--vertical-tilt', verticalTilt);

			const shineAngle = -Math.atan2(relativeX, relativeY) * 180 / Math.PI + 180;
			tile.style.setProperty('--shine-angle', `${shineAngle}deg`);

			const shineAlphaX = Math.abs(100 * horizontalAlpha);
			const shineAlphaY = Math.abs(100 * verticalAlpha);

			const shineAlphaMax = Math.max(shineAlphaX, shineAlphaY);
			const shineAlphaMin = Math.max(0, shineAlphaMax - 10);

			tile.style.setProperty('--shine-alpha', `${shineAlphaMin}% ${shineAlphaMax}%`);
		});

		tile.addEventListener('mouseout', () => {
			tile.style.removeProperty('--horizontal-tilt');
			tile.style.removeProperty('--vertical-tilt');
			tile.style.removeProperty('--shine-angle');
			tile.style.removeProperty('--shine-alpha');
		});
	}
}