Hiske v2.1b

by PhilQ

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<nav>
	<a href="#" class="menu-toggle"><i></i></a>
	<ul id="menu">
		<li class="menu-item menu-item-1">
			<ul class="menu menu-1">
				<li class="menu-item menu-item-33 on"><a href="http://www.wijnheerschap.nl/" data-page="">Welkom</a></li>
				<li class="menu-item menu-item-38"><a href="http://www.wijnheerschap.nl/shop/" data-page="">Wijnshop</a></li>
				<li class="menu-item menu-item-34"><a href="http://www.wijnheerschap.nl/contact/" data-page="">Contact</a></li>
				<li class="menu-item menu-item-39"><a href="http://www.wijnheerschap.nl/overons/" data-page="">Over ons</a></li>
				<li class="menu-item menu-item-40"><a href="http://www.wijnheerschap.nl/geschenken/" data-page="">Cadeau's</a></li>
			</ul>
		</li> 
	</ul>
</nav>

<section class="page">
	<article class="subpage" id="home" data-url="">
		<div class="bg"></div>
		<div class="subpage-content">
			<div class="content">
				<h1>Titel</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel nibh vulputate, pellentesque tortor pulvinar, tempus mauris. Duis volutpat eros odio, ac fermentum nisl rhoncus volutpat. Etiam luctus, dui et dapibus lobortis, lacus est blandit erat, elementum lobortis nibh ipsum sed sem. Ut in laoreet sapien. Sed malesuada tellus dui, vel eleifend neque dapibus sit amet. Etiam in dui vitae velit gravida varius. Aenean elementum pulvinar lectus sed tempus. Etiam sit amet interdum ipsum. Phasellus vel dolor quis sem vulputate congue vel sed tortor. Nulla id dignissim augue, et lacinia libero. Maecenas rutrum placerat facilisis. Integer vel finibus sapien. Quisque purus ex, eleifend quis nibh nec, gravida accumsan augue.
			</div>
		</div>
	</article>
	<article class="subpage" id="some" data-url="some/">
		<div class="bg"></div>
		<div class="subpage-content">
			<div class="content">
				<h2>Titel 2</h2>
In eros orci, dignissim eget facilisis porttitor, finibus sed augue. Donec justo tellus,...

SCSS

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

@import url('https://fonts.googleapis.com/css?family=Alegreya:400,400i,700,700i|Josefin+Sans:300,300i,700,700i&subset=latin-ext');

body {
	font-family: 'Josefin Sans', sans-serif;
	//font-family: 'Alegreya', serif;
	font-size: 18px;
	line-height: 1.5;
}
h1, h2, h3, h4 {
	font-family: 'Alegreya', serif;
	//font-family: 'Josefin Sans', sans-serif;
}
h1 {
	font-size: 3.6em;
}
h2 {
	font-size: 2.4em;
}
h3 {
	font-size: 1.8em;
}
h4 {
	font-size: 1.2em;
}

div.page {
	display: block;
	width: 100%;
	overflow: hidden;
}

$menu-height: 100px;
$max-width: 980px;
$page-skew: 3deg;
.subpage {
	display: block;
	overflow: hidden;
	transform-origin: 50% 50%;
	margin: -100px -50px 0px -50px;
	&:first-child {
		margin-top: -100px + $menu-height;
		padding-top: 80px;// + $menu-height;
	}
	&:last-child {
		.subpage-content {
			padding-bottom: 100px;
		}
	}
	> .bg {
		position: absolute;
		top: -50px;
		bottom: 00px;
		left: 0px;
		right: 0px;
		transform-origin: 50% 50%;
		background-color: transparent;
		background-repeat: repeat;
		background-size: cover;
		background-position: center center;
	}
	
	&:nth-child(odd) {
		transform: rotate( $page-skew );
		background: transparent;
		
		> .bg {
			transform: rotate( -$page-skew );
			background-image: url(https://placeholdit.imgix.net/~text?txtsize=16&bg=7AA45E&txtclr=89B270&txt=350%C3%97100%0Apx&w=350&h=100);
		}
		
		.subpage-content {
			transform: rotate( -$page-skew );
		}

		
		h1, h2, h3, h4 {
			text-align: left;
		}
	}
	&:nth-child(even) {
		transform: rotate( -$page-skew );
		background: transparent;
		
		> .bg {
			transform: rotate( $page-skew );
			background-image: url(https://placeholdit.imgix.net/~text?txtsize=16&bg=C9785D&txtclr=E88C6A&txt=350%C3%97100%0Apx&w=350&h=100);
		}
	
		.subpage-content {
			transform: rotate( $page-skew );
		}
		
		h1, h2, h3, h4 {
			text-align: right;
		}
	}		

	.subpage-content...