Kerstfilm Aanraders van het NT

25 December 2020

by EvanlynnNT

HTML

<div class="layoutContainer">
	
	<div class="films">
	
		<!-- -->
		<div class="film 1" style="background: url(https://i.imgur.com/V5tzJ7i.jpg) center center;">
			<div style="position: absolute; overflow: auto; width: 323px; height: 129px; left: 30px; top: 316px; text-align: justify; padding-right: 5px;">
				Dit is een stop-motion geanimeerde kerstfilm en duurt maar 42 minuten. Het gaat over een groep aliens die op de Noordpool landen en de zwaartekracht van de aarde willen stelen. Als de zwaartekracht weg is, kunnen ze namelijk veel makkelijker alles pakken wat ze willen hebben van de aarde. Echter is er één kleine alien, genaamd Alien X, die wel de vrijgevige kerstsfeer in zich heeft en dit tegen wil gaan. Weet hij de aarde te redden?
			</div>
			<button class="backButton" style="position: absolute; width: 323px; height: 20px; left: 30px; top: 450px; color: #97050a;">
				Terug
			</button>
			<div style="position: absolute; width: 300px; height: 154px; left: 358px; top: 316px;">
				<iframe src="https://www.youtube.com/embed/2UC7jvL_xp0" style="width: 100%; height: 100%; border: none; border-radius: 3px;"></iframe>
			</div>
		</div>
		<!-- -->
		<!-- -->
		<div class="film 2" style="background: url(https://i.imgur.com/nOs7FFO.jpg) center center;">
			<div style="position: absolute; overflow: auto; width: 323px; height: 129px; left: 30px; top: 316px; text-align: justify; padding-right: 5px;">
				Dit is een typische romantische kerstfilm die heel makkelijk wegkijkt. Het is de derde in de serie ‘Christmas in Evergreen’. Het gaat over een journaliste genaamd Katie die naar Evergreen gaat om daar verslag te doen over de kerst en de activiteiten rondom kerst. Ze ziet het zelf als een goede actie om toeristen te trekken rond kerstmis, maar Ben probeert haar ervan te overtuigen dat dit niet zo is en neemt haar mee de kerstsfeer in. Hoe gaat dat artikel uitpakken? Raakt ze overtuigd van kerst?
			</div>
			<button class="backButton" style="position: absolute;...

CSS

.layoutContainer * {
	box-sizing: border-box;
	color: white;
	font-family: 'Arial', sans-serif;
	font-size: 12px;
}

.layoutContainer {
	position: relative;
	overflow: hidden;
	width: 688px;
	height: 500px;
	background: url(https://i.imgur.com/KMURF2l.jpg);
}

.filmMenuContainer {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	position: absolute;
	width: 588px;
	height: 300px;
	top: 70px;
	left: 50px;
}

.filmMenu {
	border-radius: 8px;
	box-shadow: inset 0px 0px 0px 6px #fff;
	transition: all 0.7s ease;
	z-index: 0;
}

.filmMenu:hover {
	cursor: pointer;
	box-shadow: inset 0px 0px 0px 10px #fff;
}

.film {
	position: absolute;
	overflow: hidden;
	width: 0px;
	height: 0px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: all 1s ease;
}

.film.visible {
	width: 688px;
	height: 500px;
}

.backButton {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 3px;
	border: none;
	outline: none;
	text-align: center;
	line-height: 20px;
	cursor: pointer;
	transition: all 0.7s ease;
}

.backButton:hover {
	background: rgba(255, 255, 255, 1);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
 
::-webkit-scrollbar-track {
    background: #e6e6e6;
}
 
::-webkit-scrollbar-thumb {
    background: #b71d20;
}
 
::-webkit-scrollbar-thumb:hover {
    background: #a31417;
}

JavaScript

$('.filmMenu').click(function () {
	$('.filmMenuContainer').fadeToggle(1000);
	$('.filmOverlay').fadeToggle(1000);
	
	var filmNr = this.className.split(' ')[1];
	setTimeout(function () {
		$('.film.' + filmNr).toggleClass('visible');
	}, 500);
});

$('.backButton').click(function () {
	$('.film.visible').toggleClass('visible');
	
	setTimeout(function () {
		$('.filmMenuContainer').fadeToggle(1000);
		$('.filmOverlay').fadeToggle(1000);
	}, 200);
});