<section class="view" data-view-initial id="view-1">
<div class="view__inner">
<a data-to-view="#view-2">Go to view 2</a>
</div>
</section>
<section class="view" id="view-2">
<div class="view__inner">
<a data-to-view="#view-3">Go to view 3</a>
</div>
</section>
<section class="view" id="view-3">
<div class="view__inner">
<a data-to-view="#view-1">Go to view 1</a>
</div>
</section>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 900 48px 'Work Sans';
background-color: #212121;
}
a {
color: white;
text-decoration: underline;
cursor: pointer;
}
.view {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
perspective: 1200px;
display: none;
&.view--block {
display: block;
}
&.view--visible .view__inner {
transform: rotate(0deg) !important;
opacity: 1 !important;
}
&.view--up .view__inner {
transform: rotateX(-90deg);
transform-origin: 50% 0%;
opacity: 0;
}
&.view--down .view__inner {
transform: rotateX(90deg);
transform-origin: 50% 100%;
opacity: 0;
}
&:nth-child(2n) .view__inner {
background-color: #45B8E2;
}
&:nth-child(3n) .view__inner {
background-color: #ED6464;
}
&:nth-child(4n) .view__inner {
background-color: #AC92EC;
}
}
.view__inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
line-height: 100vh;
color: white;
background-color: #2BD996;
transition: opacity .6s ease;
transition-property: opacity, transform;
}
View Compiled
var nav = {
init: function(){
this._bindEvents();
this._openInitView();
},
_openInitView: function(){
//open intial view
var el = document.querySelector('[data-view-initial]');
el.classList.add('view--block');
el.classList.add('view--visible');
},
_bindEvents: function(){
var self = this,
triggers = document.querySelectorAll('[data-to-view]');
//add click event listeners
//to all view triggers
[].forEach.call(triggers, function(el){
el.addEventListener('click', function(){
var selector = this.getAttribute('data-to-view');
self._toView(selector);
}, false);
});
},
_toView: function(elSelector){
var newViewEl = document.querySelector(elSelector),
currOpenViewEl = document.querySelector('.view--visible'),
self = this;
//check if new view is the
//view that is currently open
if(newViewEl === currOpenViewEl) return;
//close currently open view
this._closeView(currOpenViewEl, function(done){
//open new view
//pass close view done method as callback
self._openView(newViewEl, done);
});
},
_closeView: function(el, callback){
//move the view to the "up" position
el.classList.add('view--up');
el.classList.remove('view--visible');
//trigger the callback x sec into the animation
setTimeout(function(){
callback(function(){
el.classList.remove('view--block');
el.classList.remove('view--up');
});
}, 100);
},
_openView: function(el, callback){
//display block the view so its loaded
//and move the view to the "down" position
el.classList.add('view--block');
el.classList.add('view--down');
setTimeout(function(){
//when the classes are added
//start the animation by adding the
//visible class and pulling the view up
el.classList.add('view--visible');
setTimeout(function(){
//animation is done
el.classList.remove('view--down');
callback();
}, 600);
}, 50);
}
};
nav.init();
This Pen doesn't use any external JavaScript resources.