<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Design based on a Dribble shot by Julius Koroll. -->
<a href="https://codepen.io/timaikens/public/" target="_blank">
<svg id="thalogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="1600px" height="1600px" viewBox="0 0 1600 1600" enable-background="new 0 0 1600 1600" xml:space="preserve">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M411.367 377.826c259.938-28.359 201.469-15.812 204 397.4 c1.578 247.219-23.391 432.9 65.4 428.672c-260.656 30.016-221.156-16.531-213.547-442.766 C472.836 441 480.2 418.3 411.4 377.8" />
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M595.57 101.888C885.477 85.7 807.1 68.3 820.1 775.3 c4.531 247.157-11.219 434.5 77.5 430.282c-272.172 34.312-220.094 5.703-225.75-444.375 C665.945 293.8 693.4 148.9 595.6 101.9" />
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M818.695 668.935c202.984-21.922 221.984-69.359 214.5 290.5 c-8.031 385-217.062 565.719-352.391 573.547c103.531-59.578 194.25-119.469 203.922-585.062 C889.32 722.3 868.6 688.8 818.7 668.9"
/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M1072.914 731.06c24.031 477.11-3 500.3 257.6 470.3 c-88.734 4.266-99.516-209.188-109.328-456.204c-18.281-457.25 1.312-484.125-265.578-460.406 c-61.625 12.609-84.281 60.484-90.734 126.875c-18.781 193.734-16.703 221.1 132.8 202.2 c-9.422-60.516-11.484-269.062 35.344-278.531C1069.367 377.9 1063 430.5 1072.9 731.1"
/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M269.477 720.326c150.641-126.047 123.828-30.109 191.4 40.8 C328.555 886.5 344.4 769.6 269.5 720.3" />
</g>
</svg>
</a>
<a href="https://codepen.io/timaikens/full/raEqpp" target="_blank" id="fs-link">Full Screen</a>
<div id="container">
<div class="panel" id="one">
<div class="text">
<h3>Portfolio</h3>
<h1>Work</h1></div>
<div class="bottom"><a href="">Discover</a></div>
</div>
<div class="panel" id="two">
<div class="text">
<h3>News</h3>
<h1>Blog</h1></div>
<div class="bottom"><a href="">Read</a></div>
</div>
<div class="panel" id="three">
<div class="text">
<h3>The team</h3>
<h1>About</h1></div>
<div class="bottom"><a href="">Learn</a></div>
</div>
<div class="panel" id="four">
<div class="text">
<h3>Say</h3>
<h1>Hi ya!</h1></div>
<div class="bottom"><a href="">Contact</a></div>
</div>
</div>
<div id="shToggle" class="plus"></div>
<div id="write-up" class="hide">
<p>Hi all! This is heavily inspired by / copied from
<br /><a href="https://dribbble.com/shots/2008542-Portfolio-Navigation" target="_blank">this great nav page design</a>, posted on Dribble by
<br />Julius Koroll. Just wanted to give some life to it!</p>
<p>Photos from <a href="https://unsplash.com" target="_blank">unsplash.com</a>, fonts from <a href="https://www.google.com/fonts" target="_blank">Google</a>.
<br />Developed in Chrome, tested in FF and Safari.</p>
</div>
</div>
<script>
// ANIMATE AND POSITION PANELS
function isInside(node, target) {
for (; node != null; node = node.parentNode) {
if (node == target) {
return true;
}
}
}
function setUpPanels() {
var pAll = document.querySelectorAll(".panel");
var pAbbr = [];
for (var f = 0; f < pAll.length; f++) {
if (pAll[f].nodeType == 1) {
pAbbr.push(pAll[f]);
}
}
for (var g = 0; g < pAbbr.length; g++) {
(function(h) {
pAbbr[h].addEventListener("mouseover", function(event) {
if (!isInside(event.relatedTarget, pAbbr[h])) {
var target = event.target;
while (target.className != "panel" && target.className != "panel inactive") {
target = target.parentNode;
}
makeActive(target);
}
});
})(g);
}
return pAbbr;
}
var panels = setUpPanels();
function makeActive(target) {
for (var i = 0; i < panels.length; i++) {
panels[i].className = "panel";
}
target.className = "panel active";
for (var j = 0; j < panels.length; j++) {
if (panels[j].className == "panel active") {
var an = j;
var al = j * 20;
panels[j].style.left = al + "%";
}
}
for (var k = 0; k < panels.length; k++) {
if (panels[k].className != "panel active") {
panels[k].className = "panel inactive";
var il;
if (k < an) {
il = al - (an - k) * 20;
panels[k].style.left = il + "%";
} else if (k > an) {
il = al + 40 / 2 + (k - an) * 20;
panels[k].style.left = il + "%";
}
}
}
}
var container = document.getElementById("container");
container.addEventListener("mouseout", function(event) {
if (!isInside(event.relatedTarget, container)) {
for (var l = 0; l < panels.length; l++) {
panels[l].className = "panel";
panels[l].style.left = "";
}
}
});
// WRITE-UP TOGGLE
var shToggle = document.getElementById("shToggle");
var writeUp = document.getElementById("write-up");
shToggle.addEventListener("click", function() {
if (shToggle.className == "plus") {
writeUp.style.width = "28em";
shToggle.className = "ex";
writeUp.className = "show";
} else {
shToggle.className = "plus";
writeUp.className = "hide";
setTimeout(function() {
writeUp.style.width = "";
}, 500);
}
});
// FS link disappearing
var fslink = document.getElementById("fs-link");
function fsLinkVis() {
if (window.location.href == "https://s.codepen.io/timaikens/fullpage/raEqpp?") {
fslink.className = "fshide";
} else {
fslink.className = "";
}
}
window.onload = fsLinkVis;
</script>
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.panel,
.text,
.bottom,
#shToggle,
#write-up > p {
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.bottom > a,
#thalogo path {
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.panel,
.text > h1,
.text > h3,
.panel > div {
cursor: default;
}
/* --- LOGO --- */
#thalogo {
position: absolute;
width: 100px;
height: 100px;
top: 15px;
left: 25px;
cursor: pointer;
z-index: 10;
}
#thalogo path {
fill: #FFFFFF;
}
#thalogo:hover path {
fill: #D8334A;
}
#fs-link {
position: absolute;
top: 50px;
left: 140px;
z-index: 10;
color: #D8334A;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
font-size: 1em;
font-weight: bold;
}
#fs-link:hover {
color: #F8536A;
}
#fs-link.fshide {
display: none;
}
/* --- PANELS --- */
.panel {
position: absolute;
top: 0;
width: 40%;
height: 100%;
text-align: center;
}
#one {
background: #111111 url('https://download.unsplash.com/38/awhCbhLqRceCdjcPQUnn_IMG_0249.jpg') center/cover no-repeat;
left: 0;
}
#two {
background: #333333 url('https://download.unsplash.com/photo-1418479631014-8cbf89db3431') center/cover no-repeat;
left: 25%;
}
#three {
background: #555555 url('https://download.unsplash.com/reserve/unsplash_5288cc8f3571d_1.JPG') center/cover no-repeat;
left: 50%;
}
#four {
background: #AAAAAA url('https://download.unsplash.com/42/cA4aKEIPQrerBnp1yGHv_IMG_9534-3-2.jpg') center/cover no-repeat;
left: 75%;
}
/* --- TEXT --- */
.text {
display: inline-block;
position: relative;
top: 37%;
text-align: left;
}
.text > h1 {
margin: -10px 0 0 0;
padding: 0;
font-family: 'Droid Serif', serif;
font-weight: normal;
font-size: 9em;
color: #FFFFFF;
text-shadow: 2px 2px 12px #555555;
}
.text > h3 {
margin: 0;
color: #FFFFFF;
font-family: 'Quicksand', sans-serif;
font-weight: normal;
font-size: 1em;
text-transform: uppercase;
letter-spacing: 0.7em;
opacity: 0.8;
}
.inactive .text {
opacity: 0.3;
}
/* --- BOTTOM BUTTON --- */
.bottom {
position: absolute;
left: 0;
bottom: 0;
width: 62.5%;
height: 12%;
text-align: center;
border-bottom: 10px solid transparent;
}
.active .bottom {
width: 100%;
border-bottom: 10px solid #D8334A;
}
.inactive .bottom {
width: 50%;
opacity: 0;
}
.bottom > a {
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: 'Quicksand', sans-serif;
font-weight: bold;
color: #FFFFFF;
height: 80px;
padding: 9px 20px 10px;
border: 3px solid #D8334A;
border-radius: 400px;
}
.bottom > a:hover {
background-color: #D8334A;
}
/* --- WRITE-UP --- */
#shToggle {
position: absolute;
top: 40px;
right: 40px;
height: 40px;
width: 40px;
background-color: #FFFFFF;
border-radius: 50%;
cursor: pointer;
z-index: 10;
}
#shToggle.ex {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
#shToggle:before,
#shToggle:after {
content: "";
position: absolute;
top: 10px;
left: 18px;
width: 4px;
height: 20px;
border-radius: 2px;
background-color: #D8334A;
}
#shToggle:after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#write-up {
position: absolute;
text-align: right;
top: 30px;
right: 100px;
width: 0;
color: #FFFFFF;
font-family: 'Quicksand', sans-serif;
font-size: 1em;
font-weight: normal;
overflow: hidden;
}
#write-up > p {
position: relative;
right: 0;
margin: 0 0 1em;
text-shadow: 1px 1px 4px #333333;
}
#write-up.hide > p {
right: -28em;
opacity: 0;
}
#write-up a {
text-decoration: none;
color: #D8334A;
font-weight: bold;
}
#write-up a:hover {
color: #F8536A;
}
@media (max-width:1200px) {
.text > h1 {font-size: 7em;}
}
@media (max-width:950px) {
.text > h1 {font-size: 5em;}
}
