Skip to content

Instantly share code, notes, and snippets.

@albertodelax

albertodelax/.DS_Store

Last active March 19, 2016 18:36
Show Gist options
  • Save albertodelax/bd33773d259b9df0dff2 to your computer and use it in GitHub Desktop.
Save albertodelax/bd33773d259b9df0dff2 to your computer and use it in GitHub Desktop.
Download ZIP
Circular Rotating Nav Bar
Display the source blob
Display the rendered blob
Raw
bubble.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
face.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!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