Zeilkamp.frl - v1

by PhilQ

HTML

<div id="body" class="vertical">
  <section id="zeilkamp">
    <a href="#" class="close_page">Sluiten</a>
    <h1>Zeilkamp in Friesland</h1>
  </section><section id="boothuren">
    <a href="#" class="close_page">Sluiten</a>
	<h1>Boten huren</h1>
  </section><section id="schoolkamp">
    <a href="#" class="close_page">Sluiten</a>
	<h1>Schoolkamp</h1>
  </section>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700|Alegreya+Sans:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext);*,:after,:before{margin:0;padding:0;box-sizing:border-box}#body,body,html{width:100%;height:100%;overflow:hidden}#body{font-family:Montserrat,sans-serif}section{display:inline-block;position:absolute;overflow:hidden;cursor:pointer;background-color:transparent;background-position:center center;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;top:0;left:0;z-index:1}section:after{content:'';z-index:1;position:absolute;top:25%;left:0;width:100%;height:75%;background:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7));opacity:1;transition:opacity .35s ease 0s,height .5s ease 0s,top .5s ease 0s}section:focus:after,section:hover:after{top:75%;height:25%}section>.close_page{position:absolute;display:inline-block;top:-40px;right:20px;height:35px;background-color:#fff;border-radius:2px;text-decoration:none;color:#aaa;font-size:.8em;text-transform:uppercase;padding:10px;opacity:0;box-shadow:0 1px 1px -1px #000;transition:top .35s ease 0s,opacity .35s ease 0s}section>.close_page:focus,section>.close_page:hover{box-shadow:0 1px 3px -1px #000}section>h1{position:absolute;top:100%;left:0;padding:25px 35px;cursor:inherit;font-weight:400;font-size:2em;color:#fff;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.5);transform:translateY(-100%);transition:font-size .5s ease 0s,transform .5s ease 0s,top .5s ease 0s,text-shadow .5s ease 0s}section.open{cursor:default}section.open:after{opacity:0!important}section.open>.close_page{top:20px;opacity:1;transition:top .35s ease .5s,opacity .35s ease .5s}section.open>h1{font-size:3em;top:0;transform:translateY(0);text-shadow:0 1px 25px rgba(0,0,0,.7)}section>*{z-index:2}.horizontal section{height:33.333%;transition:top .5s ease 0s,height .5s ease 0s}.vertical section{width:33.333%;transition:left .5s ease 0s,width...

JavaScript

$( document ).ready(function(){
	$('section').click(function(){
		if ( ! $('#body').hasClass('open') ) {
			var p = $( this ).css('z-index', 2).addClass('open').attr('id');
			$('#body').addClass('open').data('page', p );
		}
  	});
  	$('.close_page').click(function( event ){
		event.preventDefault();
		event.stopImmediatePropagation();
		var p = $('#body').data('page');
		$('#' + p ).removeClass('open');
		$('#body').data('page', '').removeClass('open');
		setTimeout(function(){
			$('#' + p ).css('z-index', 1);
		}, 500);
	});
});