Skip to content

Instantly share code, notes, and snippets.

@agdelax
Last active Mar 19, 2016
Embed
What would you like to do?
Circular Rotating Nav Bar
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html>
<head>
<title>Circle Text</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Anonymous+Pro' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<style type="text/css">
body{
background-color: #212121;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}
.container{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
padding: 0;
position: relative;
width: 100%;
height: 100%;
}
h1{
font-family: 'Roboto Slab', serif;
color: white;
font-size: 11.5vmin;
font-weight: 300;
-webkit-animation-name: turn;
-webkit-animation-direction: reverse;
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-name: turn;
animation-direction: reverse;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-o-animation-name: turn;
-o-animation-direction: reverse;
-o-animation-duration: 30s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
h2{
font-family: 'Anonymous Pro', 'Courier New', monospace;
color: #d3d3d3;
font-size: 5vmin;
font-weight: 400;
-webkit-animation-name: turn;
-webkit-animation-duration: 60s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-name: turn;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes turn{
0%{-webkit-transform: rotate(0);}
100%{-webkit-transform: rotate(360deg);}
}
@keyframes turn{
0%{transform: rotate(0);}
100%{transform: rotate(360deg);}
}
a{
text-decoration: none;
color: #d3d3d3;
}
a:hover{
color: white;
}
#face{
position: fixed;
top: 50%;
left: 50%;
max-width: 25vmin;
transform: translate(-45%, -50%);
-webkit-transform: translate(-45%, -50%);
-moz-transform: translate(-45%, -50%);
-ms-transform: translate(-45%, -50%);
-o-transform: translate(-45%, -50%);
}
#bubble{
max-width: 25vmin;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-110%, -120%);
-webkit-transform: translate(-110%, -120%);
-moz-transform: translate(-110%, -120%);
-ms-transform: translate(-110%, -120%);
-o-transform: translate(-110%, -120%);
display: none;
}
</style>
</head>
<body>
<div class="container">
<img id= "face" src="face.svg">
<img id= "bubble" src="bubble.svg">
<h1 id="name">Designer &bigstar; Alberto Guillermo de la Cruz &bigstar;&nbsp;</h1>
<h2 id="links">About &mdash; Projects &mdash; R&eacute;sum&eacute; &mdash; Twitter &mdash; Github &mdash; LinkedIn &mdash;&nbsp;</h2>
</div>
<script type="text/javascript">
$('h1').circleType();
$('h2').circleType();
// FOR ABOUT
var aboutLink = document.createElement('a');
aboutLink.href="http://albertogui.com";
for(i=1; i<6; i++){
var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
aboutLink.appendChild(linkDiv);
};
document.getElementById('links').appendChild(aboutLink);
// FOR PROJECTS
var projectsLink = document.createElement('a');
projectsLink.href="http://bl.ocks.org/agdelax";
for(i=9; i<18; i++){
var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
projectsLink.appendChild(linkDiv);
};
$(projectsLink).insertAfter("h2 .char8");
// FOR RESUME
var resumeLink = document.createElement('a');
resumeLink.href="http://albertogui.com/resume";
for(i=20; i<26; i++){
var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
resumeLink.appendChild(linkDiv);
};
$(resumeLink).insertAfter("h2 .char19");
// FOR TWITTER
var twitterLink = document.createElement('a');
twitterLink.href="http://twitter.com/agdelax";
for(i=29; i<36; i++){
var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
twitterLink.appendChild(linkDiv);
};
$(twitterLink).insertAfter("h2 .char28");
// FOR GITHUB
var githubLink = document.createElement('a');
githubLink.href="http://github.com/agdelax";
for(i=39; i<45; i++){
var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
githubLink.appendChild(linkDiv);
};
$(githubLink).insertAfter("h2 .char38");
// FOR LINKEDIN
var linkedinLink = document.createElement('a');
linkedinLink.href="http://linkedin.com/in/agdelax";
for(i=48; i<56; i++){
var linkDiv=document.getElementsByTagName('h2')[0].getElementsByClassName("char"+i)[0];
linkedinLink.appendChild(linkDiv);
};
$(linkedinLink).insertAfter("h2 .char47");
$("#face").hover(function () {
document.getElementById('bubble').style.display="block";
}, function(){
document.getElementById('bubble').style.display="none";
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment