Zodiac | Sagittarius + Capricorn

21 December 2020

by EvanlynnNT

HTML

<div style="position: relative; width: 688px; height: 500px;">

	<div class="sagittarius zodiacSmall" style="left: 0px; background: url(https://i.imgur.com/XTe3HCr.jpg) top left;">
		<img class="zodiacTitle" style="position: absolute;" src="https://i.imgur.com/mxoHF8v.png">
		<div class="zodiacLayout" style="position: relative; width: 688px; height: 500px;">
			<div class="layout one" style="background: url(https://i.imgur.com/kljSeMu.png);"></div>
			<div class="layout two" style="background: url(https://i.imgur.com/sIrGc4y.png) bottom;"></div>
			<div class="layout three" style="background: url(https://i.imgur.com/hAHKOm6.jpg);"></div>
			<div class="layout five" style="position: absolute; overflow: auto; width: 628px; height: 157px; left: 30px; top: 313px; text-align: justify; padding-right: 5px; box-sizing: border-box; color: #f29566;">
				Boogschutters worden geboren ongeveer tussen 21 november en 21 december. Dit jaar mogen de baby’s die na 21 november 21:39 geboren zijn zichzelf een boogschutter noemen.<br><br>

				Boogschutters zijn optimistisch, energiek, avontuurlijk en nieuwsgierig. Ze willen de wereld ontdekken, verre reizen maken, nieuwe ervaringen opdoen en andere denkbeelden verkennen. Met een filosofische instellingen zijn ze op zoek naar de betekenis van het leven en geloven ze vaak dat er een diepere betekenis achter dingen verscholen is.<br><br>

				Met hun positieve kijk op het leven en een idealistische houding zijn ze moeilijk uit het veld te slaan bij tegenslag. Ze zijn tevens heel erg eerlijk, soms tot het tactloze toe, en hebben een groot verantwoordelijkheids- en gerechtigheidsgevoel. Dit maakt dat ze het vaak opnemen voor minderheden en protesteren tegen onrecht.<br><br>

				Vrijheid is één van de belangrijkste dingen voor boogschutters, ze zullen snel klaar zijn met jaloerse vrienden of partners. Ze willen geen bezit zijn van iemand, ze willen de ruimte hebben om het leven te verkennen en ze zijn onafhankelijk genoeg om dat te...

CSS

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

.zodiacSmall {
	cursor: pointer;
}

.zodiacSmall,
.zodiacWide,
.zodiacPlaceholder {
	position: absolute;
	width: 339px;
	height: 500px;
	transition: width 0.7s ease;
	z-index: 0;
}

.zodiacWide,
.zodiacPlaceholder {
	width: 688px;
}

.onTop {
	z-index: 1;
}

.layout {
	position: absolute;
	width: 688px;
	height: 500px;
	display: none;
}

.layout.two {
	position: absolute;
	height: 0px;
	bottom: 0px;
	transition: height 0.7s ease;
}

.layout.two.visible {
	height: 500px;
}

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

JavaScript

$(document).on('click', '.zodiacSmall', function() {
	var thisZodiac = $(this);
	var zodiacClass = $(this).attr('class').split(' ')[0];
	$(this).toggleClass('selected zodiacSmall zodiacPlaceholder onTop');
	$(this).children('.zodiacTitle').fadeOut(700);
	setTimeout(function () {
		$('.' + zodiacClass + ' .layout.one').fadeIn(700);
	}, 700);
	setTimeout(function () {
		$('.' + zodiacClass + ' .layout.two').show(0);
		$('.' + zodiacClass + ' .layout.two').addClass('visible');
	}, 1400);
	setTimeout(function () {
		$('.' + zodiacClass + ' .layout.three').fadeIn(700);
	}, 2100);
	setTimeout(function () {
		$('.' + zodiacClass + ' .layout.four').fadeIn(700);
	}, 2800);
	setTimeout(function () {
		$('.' + zodiacClass + ' .layout.five').fadeIn(700);
	}, 3500);
	setTimeout(function () {
		thisZodiac.toggleClass('zodiacWide zodiacPlaceholder');
	}, 4200);
});

$(document).on('click', '.zodiacWide', function() {
	var thisZodiac = $(this);
	var zodiacClass = $(this).attr('class').split(' ')[0];
	$(this).toggleClass('zodiacWide zodiacPlaceholder');
	setTimeout(function () {
		$('.' + zodiacClass + ' .layout.five').fadeOut(700);
	}, 0);
	setTimeout(function () {
		$('.' + zodiacClass + ' .layout.four').fadeOut(700);
	}, 700);
	setTimeout(function () {
		$('.' + zodiacClass + ' .layout.three').fadeOut(700);
	}, 1400);
	setTimeout(function () {
		$('.' + zodiacClass + ' .layout.two').removeClass('visible');
		setTimeout(function () {
			$('.' + zodiacClass + ' .layout.two').hide();
		}, 700);
	}, 2100);
	setTimeout(function () {
		$('.' + zodiacClass + ' .layout.one').fadeOut(700);
	}, 2800);
	
	setTimeout(function () {
		thisZodiac.toggleClass('selected zodiacPlaceholder zodiacSmall');
		setTimeout(function () {
			thisZodiac.toggleClass('onTop');
		}, 700);
		thisZodiac.children('.zodiacTitle').fadeIn(700);
	}, 3500);
});