Zomeractie | Griekse Eilanden

29 Augustus 2021

by EvanlynnNT

HTML

<div style="position: relative; width: 990px; height: 550px; background: url(https://i.imgur.com/9IXj8eB.jpg);">

	<img style="position: absolute; pointer-events: none;" src="https://i.imgur.com/WwPJINd.png">
	
	<div class="text one" style="position: absolute; overflow: auto; width: 455px; height: 290px; left: 530px; top: 123px; text-align: justify; padding-right: 5px; box-sizing: border-box; color: #729ab1;">
		Het vijfde en tevens laatste thema van de Zomeractie is aangebroken: Griekse eilanden.<br><br>
		
		Het land Griekenland, dat in eigen taal 'Hellas' wordt genoemd, bestaat uit zo'n zesduizend verschillende eilanden en slechts tweehonderd hiervan zijn bewoond.<br><br>
		 
		 De Griekse eilanden worden in de zomer regelmatig gekozen als vakantiebestemming, door zowel jong als oud. Jongeren vertrekken sneller naar Kreta om in Chersonissos, ook wel "Cherso" in de volksmond, vele alcoholische drankjes te nuttigen en te feesten, terwijl ouderen eerder naar Kos afreizen om tot rust te komen in een all inclusive resort.<br><br>
		 
		 Griekenland moet het voornamelijk hebben van de toeristen die uit het buitenland komen. Vanuit Nederland komen er gewoonlijk ieder jaar al meer dan een half miljoen mensen naar het blauw-witte land om van hun zomer te genieten.<br><br>
		 
		 Buiten het feit dat Griekenland gezien wordt als perfecte vakantiebestemming omdat het weer en de sfeer er zo lekker is, wordt er ook naar het mediterrane land afgereisd om te kijken naar de grootse geschiedenis van het land. Zo zijn er een heleboel overblijfselen uit de tijd van de Klassieke Oudheid, toen de Grieken een vooruitstrevende groep was ten opzichte van de rest van de wereld.<br><br>
		 
		 In dit Zomeractie-artikel zullen we meerdere Griekse eilanden behandelen. Door op de eilanden in de lay-out te klikken, kom je meer over ze te weten, wat cruciaal is voor de competitie!
	</div>
	<div class="text one competition" style="position: absolute; overflow: auto; width: 455px; height:...

CSS

* {
	font-family: 'Arial', sans-serif;
	font-size: 12px;
}

.image {
	transition: all 1.4s ease-in-out;
}

.image.one {
	transform: scale(1);
}

.island {
	transform: scale(0);
	border-radius: 50%;
}

.island.two {
	transform-origin: 313px 141px;
}

.island.three {
	transform-origin: 170px 173px;
}

.island.four {
	transform-origin: 16px 264px;
}

.island.five {
	transform-origin: 405px 302px;
}

.island.six {
	transform-origin: 459px 351px;
}

.island.seven {
	transform-origin: 314px 364px;
}

.island.eight {
	transform-origin: 174px 409px;
}

.island.nine {
	transform-origin: 325px 461px;
}

.island.ten {
	transform-origin: 291px 315px;
}

.button.terug:hover {
	cursor: pointer;
}

.wordSearch {
	display: grid;
	grid-template-columns: repeat(12, 40px);
	grid-template-rows: repeat(12, 40px);
	grid-gap: 0px;
	overflow: hidden;
	background: #fff;
}

.wordBox, .codeBox {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #a3becd;
	box-sizing: border-box;
	background: #fff;
	text-transform: uppercase;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
	font-family: 'Handlee', cursive;
	font-size: 16px;
	color: #252525;
}

.codeBox {
	width: 100%;
	line-height: 40px;
	text-align: center;
	cursor: unset;
	outline: none;
}

.wordBox.clicked {
	background: rgba(163, 190, 205, 0.3);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #e6e6e6;
}

::-webkit-scrollbar-thumb {
    background: #d4b178;
}

::-webkit-scrollbar-thumb:hover {
    background: #729ab1;
}

a {
	text-decoration: none;
	color: #d4b178;
}

JavaScript

$('head').append('<link href="https://fonts.googleapis.com/css2?family=Handlee&display=swap" rel="stylesheet">');

$(document).ready(function() {
	$('.text').hide();
	$('.text.one').show();
	$('.button.terug').hide();
	
	$('.dot').click(function() {
		var island = this.className.split(' ')[1];
		$('.island.' + island).css({
			transform: 'scale(1)',
			borderRadius: '0'
		});
		$('.text').fadeOut(700);
		$('.button.heen').fadeOut(1400);
		$('.button.terug').fadeIn(1400);
		setTimeout(function() {
			$('.text.' + island).fadeIn(700);
		}, 700);
	});
	
	$('.competition').click(function() {
		$('.island.eleven').css({
			transform: 'scale(1)',
			borderRadius: '0'
		});
		$('.text').fadeOut(700);
		$('.button.heen').fadeOut(1400);
		$('.button.terug').fadeIn(1400);
		setTimeout(function() {
			$('.text.eleven').fadeIn(700);
		}, 700);
	});
	
	$('.terug').click(function terug() {
		var island = this.className.split(' ')[1];
		$('.island').css({
			transform: 'scale(0)',
			borderRadius: '50%'
		});
		$('.text').fadeOut(700);
		$('.competition').fadeIn(700);
		$('.button.terug').fadeOut(1400);
		$('.button.heen').fadeIn(1400);
		setTimeout(function() {
			$('.text.one').fadeIn(700);
		}, 700);
	});
	
	$('.wordBox').click(function() {
		$(this).toggleClass('clicked');	
		var clickRequired = $('.clickRequired').length;
	});
});