Wingspan Bird Card

by PhilQ

HTML

<input type="checkbox" id="zoom" title="Toggle zoom" />

<main>

  <div class="card">
    <div class="info">
    </div>
    <div class="habitats">
      <svg class="habitat habitat-3" viewBox="0 0 500 500"><use href="#i-wetland"></use></svg>
      <svg class="habitat habitat-3" viewBox="0 0 500 500"><use href="#i-grassland"></use></svg>
      <svg class="habitat habitat-3" viewBox="0 0 500 500"><use href="#i-forest"></use></svg>
    </div>
   
    <div class="names">
      <div class="common">Wespendief</div>
      <div class="scientific">Pernis apivorus</div>
    </div>
		
		<div class="power">
			<div class="type">
				<!-- <svg class="bonus-cards" viewBox="0 0 394 500"><use href="#i-bonus-cards"></use></svg> -->
				<svg class="flocking" viewBox="0 0 394 500"><use href="#i-flocking"></use></svg>
				<!-- <svg class="predator" viewBox="0 0 500 500"><use href="#i-predator"></use></svg> -->
			</div>
			<div class="description">
				<span class="trigger">Einde ronde: </span>kies 1 andere speler. Voor<br />
				elke actiesteen die hij op zijn <i><svg class="habitat" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid  slice"><use href="#i-grassland"></use></svg></i> heeft, stop<br />
				je 1 <i><svg class="bird-card" viewBox="0 0 344 500" preserveAspectRatio="xMidYMid meet"><use href="#i-bird-card"></use></svg></i> uit je hand onder deze vogel weg.<br />
				Trek dan hetzelfde aantal <i><svg class="bird-card" viewBox="0 0 344 500" preserveAspectRatio="xMidYMid meet"><use href="#i-bird-card"></use></svg></i>.
			</div>
		</div>
  </div>

</main>

<svg xmlns="http://www.w3.org/2000/svg" role="presentation" width="0" height="0" style="position: absolute;"><defs>
	<symbol id="i-bird" viewBox="0 0 344 500">
		<path
			d="M302.2,500H41.9C9.5,500,1,473.2,1,459.1V40.9C1,8.6,27.7,0,41.9,0H302.2C334.5,0,343,26.8,343,40.9V459.1C343,491.5,316.3,500,302.2,500Z"
			fill="var(--taupe)"...

SCSS

*, ::before, ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100vw;
  height: 100vh;
}

@font-face {
    font-family: "Cardenio Modern";
		font-weight: bold;
    src: url("https://db.onlinewebfonts.com/t/eb3efc1908522d0118d7e4571f3235ac.eot");
    src: url("https://db.onlinewebfonts.com/t/eb3efc1908522d0118d7e4571f3235ac.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/eb3efc1908522d0118d7e4571f3235ac.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/eb3efc1908522d0118d7e4571f3235ac.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/eb3efc1908522d0118d7e4571f3235ac.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/eb3efc1908522d0118d7e4571f3235ac.svg#Cardenio Modern Bold")format("svg");
}

@font-face {
    font-family: "Futura PT Web Cond Book";
    src: url("https://db.onlinewebfonts.com/t/2e2048e7183f5f50ec922408891ec8b0.eot");
    src: url("https://db.onlinewebfonts.com/t/2e2048e7183f5f50ec922408891ec8b0.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/2e2048e7183f5f50ec922408891ec8b0.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/2e2048e7183f5f50ec922408891ec8b0.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/2e2048e7183f5f50ec922408891ec8b0.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/2e2048e7183f5f50ec922408891ec8b0.svg#Futura PT Web Cond Book")format("svg");
}

@font-face {
  font-family: 'Thirsty Script';
  src: local("Thirsty Script Light"),
    url('https://cdn.shopify.com/s/files/1/0256/9712/4414/t/4/assets/6591fb3f70b5--hinted-ThirstyScriptLight.ttf?v=1589300349') format('woff2');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Thirsty Script';
  src: local("Thirsty Script Regular"),
    url('https://cdn.shopify.com/s/files/1/0256/9712/4414/t/4/assets/29b96f45dbaf--hinted-ThirstyScriptRegular.ttf?v=1589300624')...

JavaScript

document.getElementById('zoom').addEventListener('click', (e) => {
	document.querySelector('main').classList.toggle('zoomed', e.target.checked);
});

// const body = document.querySelector('body');
const root = document.querySelector(':root');
const card = document.querySelector(".card");
let halfWidth = root.clientWidth / 2;
let halfHeight = root.clientHeight / 2;

window.addEventListener('resize', (e) => {
	halfWidth = root.clientWidth / 2;
	halfHeight = root.clientHeight / 2;
});

window.addEventListener('mousemove', (e) => {
	card.style.setProperty('--mouse-x', (e.clientX - halfWidth) / halfWidth);
	card.style.setProperty('--mouse-y', (e.clientY - halfHeight) / halfHeight);
});

window.addEventListener('mouseout', (e) => {
	card.style.setProperty('--mouse-x', 0);
	card.style.setProperty('--mouse-y', 0);
});