A Pen by Anthony

Thumbnail
This awesome code was written by anthonygermishuys, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright anthonygermishuys ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Anthony</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="not"></div>
		<ul id="notches">
						<li>█</li>
			<li>█</li>
<li>█</li>
			<li>█</li>
<li>█</li>
			<li>█</li>
<li>█</li>
			<li>█</li>
																	</ul>

<ul id="menu-radial-mapbutton-border">
  <li class="map-item-border"><a class="map-back-border" id="plusborder"></a></li>
  <li class="map-item-border"><a class="map-back-border" id="minusborder"></a></li>
  <li class="map-item-border"><a class="map-back-border" id="closemapborder"></a></li>
</ul>
<ul id="menu-radial-mapbutton">
  <li class="map-item fa fa-search-plus"><a class="map-back" id="mapplus"  ></a></li>
  <li class="map-item" map-icon="U"><a class="map-back" id="mapminus"></a></li>
  <li class="map-item" map-icon="6"><a class="map-back" id="map"></a></li>
  
</ul>
<ul id="menu-radial-mapbutton-select">
  <li class="map-item-select"><a class="map-back-select" id="plusselect"></a></li>
  <li class="map-item-select"><a class="map-back-select" id="mapselect" ></a></li>
  <li class="map-item-select"><a class="map-back-select" id="minusselect" ></a></li>
</ul>

<div id="ring">
 <div class="menu-button">



<div class="earth-wrap"><div class="globe"></div></div> 
  				<ul id="arrows">
						<li>▼</li>   
<li>▼</li>       
<li>▼</li>      
<li>▼</li>      
					</ul>
 <div class="dial"></div>
 <div class="visualization-background"></div>
 </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/anthonygermishuys/a-pen-by-anthony-xbBqJQ */
*, *:after, *:before {margin: 0; padding: 0;}

body {overflow:hidden;
background:radial-gradient(#000 16%, transparent 17%),radial-gradient(#444 16%, transparent 17%) 0px 1px,
radial-gradient(#000 16%, transparent 17%) 8px 8px,radial-gradient(#444 16%, transparent 17%) 8px 9px;
background-color:#282828;background-size: 16px 16px;}

#not {position:absolute;width:730px;height:585px;top:50%;left:50%;margin:-289.5px 0 0 -242.5px;
border-radius:50%;background:transparent;border:30px solid transparent;border-left:30px solid #222;box-sizing:border-box;
-webkit-transform:scale(.7);-webkit-transition:-webkit-transform 1s ease 3s;}

#not.animate {-webkit-transform:scale(1);-webkit-transition:-webkit-transform 1s ease 4s;}

#notches {position:absolute;width: 730px;height:510px;top:50%;left:50%;margin:-205px 0 0 -230px;z-index:2;
border-radius:50%;list-style:none;}

#notches li{position:absolute;height:250px;margin:-43px 0 0 230px;z-index:3;
text-align:center;font-size:24px;color:transparent;
-webkit-transform-origin:50% 100%;}

#arrows {position:absolute;width:300px;height:300px;top:50%;left:50%;margin:-150px 0 0 -150px;z-index:140;
border-radius:50%;list-style:none;	
-webkit-transform:scale(1.2);-webkit-transition:all 1s ease 4s;}

#arrows li {position:absolute;height:130px;margin:21px 0 0 137.5px;z-index:5;
text-align:center;font-size:25px;color:rgba(0,157,220,1);
-webkit-transform-origin: 50% 100%;}

#arrows li:nth-child(1) {-webkit-transform:rotate(-89deg);}
#arrows li:nth-child(2) {-webkit-transform:rotate(0deg);}
#arrows li:nth-child(3) {-webkit-transform:rotate(89deg);}
#arrows li:nth-child(4) {-webkit-transform:rotate(180deg);}




#notches li:nth-child(1n+9):hover {
 color:black; -webkit-text-stroke: 1px rgba(255, 255, 255, .7);
text-shadow: 0 0 15px #009ddc;}

#notches li:nth-child(1) {-webkit-transform:rotate(-140deg);}
#notches li.animate:nth-child(1) {color: rgba(0, 157, 220, .6);text-shadow: 0 -1px 0 rgba(0, 157, 220, .3), 0 0 0 rgba(255, 255, 255, .8), 0 0 15px #009ddc;}
#notches li:nth-child(2) {-webkit-transform:rotate(-130.5deg);}
#notches li.animate:nth-child(2) {color: rgba(0, 157, 220, .6);text-shadow: 0 -1px 0 rgba(0, 157, 220, .3), 0 0 0 rgba(255, 255, 255, .8), 0 0 15px #009ddc;}
#notches li:nth-child(3) {-webkit-transform:rotate(-121.5deg);}
#notches li.animate:nth-child(3) {color: rgba(0, 157, 220, .6);text-shadow: 0 -1px 0 rgba(0, 157, 220, .3), 0 0 0 rgba(255, 255, 255, .8), 0 0 15px #009ddc;}
#notches li:nth-child(4) {-webkit-transform:rotate(-112deg);}
#notches li.animate:nth-child(4) {color: rgba(0, 157, 220, .6);text-shadow: 0 -1px 0 rgba(0, 157, 220, .3), 0 0 0 rgba(255, 255, 255, .8), 0 0 15px #009ddc;}
#notches li:nth-child(5) {-webkit-transform:rotate(-67.5deg);}
#notches li.animate:nth-child(5) {color: rgba(0, 157, 220, .6);text-shadow: 0 -1px 0 rgba(0, 157, 220, .3), 0 0 0 rgba(255, 255, 255, .8), 0 0 15px #009ddc;}


#notches li:nth-child(6) {-webkit-transform:rotate(-57.5deg);}
#notches li.animate:nth-child(6) {color: rgba(0, 157, 220, .6);text-shadow: 0 -1px 0 rgba(0, 157, 220, .3), 0 0 0 rgba(255, 255, 255, .8), 0 0 15px #009ddc;}
#notches li:nth-child(7) {-webkit-transform:rotate(-48.5deg);}
#notches li.animate:nth-child(7) {color: rgba(0, 157, 220, .6);text-shadow: 0 -1px 0 rgba(0, 157, 220, .3), 0 0 0 rgba(255, 255, 255, .8), 0 0 15px #009ddc;}

#notches li:nth-child(8) {-webkit-transform:rotate(-40deg);}
#notches li.animate:nth-child(8) {color: rgba(0, 157, 220, .6);text-shadow: 0 -1px 0 rgba(0, 157, 220, .3), 0 0 0 rgba(255, 255, 255, .8), 0 0 15px #009ddc;}
#notches li:nth-child(9) {font-size:100px;-webkit-transform:translate3d(-40px,-2.5px,0px)  rotate(90deg);text-shadow: 1px -1px 0 rgba(255, 255, 255,0.09);color:black;}





#ring {position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;z-index:100;border-radius:50%;
background:url('http://anthony.germishuys.cloudvent.net/pics/ring.png') no-repeat center;background-size:contain;}

.menu-button {position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;z-index:100;border-radius:50%;border:5px solid grey;background:black;overflow:hidden;box-sizing:border-box;-webkit-transition:all 1.5s ease-in-out;}

.menu-button.animate {background:transparent;-webkit-transition:all 2s ease-in-out;}

.stage-earth-orb {position:absolute;top:50%;left:50%;width:240px;height:240px;margin:-120px 0 0 -120px;-webkit-perspective:1000px;
background:black;border-radius:50%;-webkit-transform:scale(.9);display:none;}

.orb {position:absolute;left:50%;top:50%;border-radius:50%;height:240px;width:240px;margin:-120px 0 0 -120px;-webkit-transform-style:preserve-3d;}
.orb h2 {position:absolute;width:100%;margin-top:105px;text-align:center;font-family:'dodger';font-size:27px;z-index:4;
background:-webkit-linear-gradient(white,#C0C0C0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow: 1px 1px 1px rgba(0,0,0,0.6);}

.orb div {position:absolute;border-radius:50%;height:240px;width:240px;border:2px solid rgba(0, 157, 220,.8);box-sizing:border-box;}

.orb div:nth-child(1)  {-webkit-transform: rotate3d(0,1,0,0deg);}
.orb div:nth-child(2)  {-webkit-transform: rotate3d(0,1,0,20deg);}
.orb div:nth-child(3)  {-webkit-transform: rotate3d(0,1,0,40deg);}
.orb div:nth-child(4)  {-webkit-transform: rotate3d(0,1,0,60deg);}
.orb div:nth-child(5)  {-webkit-transform: rotate3d(0,1,0,80deg);}
.orb div:nth-child(6)  {-webkit-transform: rotate3d(0,1,0,100deg);}
.orb div:nth-child(7)  {-webkit-transform: rotate3d(0,1,0,120deg);}
.orb div:nth-child(8)  {-webkit-transform: rotate3d(0,1,0,140deg);}
.orb div:nth-child(9)  {-webkit-transform: rotate3d(0,1,0,160deg);}
.orb div:nth-child(10) {-webkit-transform: rotate3d(0,1,0,180deg);}
.orb div:nth-child(11) {-webkit-transform: rotate3d(0,0,1,90deg) rotate3d(0,1,0,180deg);}
.orb div:nth-child(12) {-webkit-transform: rotate3d(0,0,1,90deg) rotate3d(0,1,0,200deg);}
.orb div:nth-child(13) {-webkit-transform: rotate3d(0,0,1,90deg) rotate3d(0,1,0,220deg);}
.orb div:nth-child(14) {-webkit-transform: rotate3d(0,0,1,90deg) rotate3d(0,1,0,240deg);}
.orb div:nth-child(15) {-webkit-transform: rotate3d(0,0,1,90deg) rotate3d(0,1,0,260deg);}
.orb div:nth-child(16) {-webkit-transform: rotate3d(0,0,1,90deg) rotate3d(0,1,0,280deg);}
.orb div:nth-child(17) {-webkit-transform: rotate3d(0,0,1,90deg) rotate3d(0,1,0,300deg);}
.orb div:nth-child(18) {-webkit-transform: rotate3d(0,0,1,90deg) rotate3d(0,1,0,320deg);}
.orb div:nth-child(19) {-webkit-transform: rotate3d(0,0,1,90deg) rotate3d(0,1,0,340deg);}

.orb.animate {-webkit-animation:rotate 10s linear 1 forwards;}
@-webkit-keyframes rotate {0%{-webkit-transform:rotate3d(0,1,0,0deg);}100%{-webkit-transform:rotate3d(0,1,0,360deg);}}

.earth-wrap {position:absolute;top:50%;left:50%;width:240px;height:240px;margin:-120px 0 0 -120px;overflow:hidden;}

.globe {position:absolute;top:50%;left:50%;width:640px;height:240px;margin:-120px 0 0 -120px;display:none;
background:url('http://anthony.germishuys.cloudvent.net/pics/maptest2.png') repeat-x left top;}
.globe.animate{-webkit-animation:globe 8s linear 1 forwards;}

@-webkit-keyframes globe {0% {background-position:0px;} 100%{background-position:635px;}}


#menu-radial-mapbutton {position:absolute;top:50%;left:50%;width:400px;height:400px;margin:-200px 0 0 -200px;
  border-radius:50%;list-style:none;overflow:hidden;-webkit-transform:scale(0.45);font-size:45px;
  -webkit-transition: all 2s 3s;z-index:11;box-sizing:border-box;border-radius:400px;}

#menu-radial-mapbutton.animate{-webkit-transform:scale(1);-webkit-transition:all 2s ease;}

.map-item{
  
  position: absolute;
  top: 50%;
  left: 50%;
  text-decoration: none;
  display: none;
}
.map-item:before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  top: -20px;
  left: -25px;
  background: -webkit-linear-gradient(white, #C0C0C0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  
  
  
 -webkit-transition:-webkit-text-fill-color .5s;}
.map-item:hover:before{-webkit-text-fill-color:#00E0FC;-webkit-transition:-webkit-text-fill-color .5s;-webkit-transform:translateX(-4px);}

.map-item:nth-child(1),.map-item:nth-child(2),.map-item:nth-child(3) {display:block;}
.map-item:nth-child(1) .map-back,.map-item:nth-child(2) .map-back,.map-item:nth-child(3) .map-back {-webkit-transform:rotate(198deg) skew(-54deg);}

.map-item:nth-child(1):before,.map-item:nth-child(2):before,.map-item:nth-child(3):before {margin:-17px 0 0 -196px;}
.map-item:nth-child(1):before {-webkit-transform:rotate(-36deg);}
.map-item:nth-child(2):before {-webkit-transform:rotate(36deg);}

[map-icon]:before {content:attr(map-icon);display:block;font-family:'Typicons';background:-webkit-linear-gradient(white, #C0C0C0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:1px 3px 2px rgba(0,0,0,0.6);}

.map-back {position:absolute;top:50%;left:50%;height:405px;width:405px;margin-top:-405px;
  -webkit-transform-origin:0px 405px;
  background:#222;border:2px solid grey;box-sizing:border-box;}

#menu-radial-mapbutton-border {position:absolute;top:50%;left:50%;width:404px;height:404px;margin:-202px 0 0 -202px;
  border-radius:50%;list-style:none;overflow:hidden;-webkit-transform:scale(0.45);
  -webkit-transition: all 2s 3s;z-index:10;box-sizing:border-box;}

#menu-radial-mapbutton-border.animate{-webkit-transform:scale(1);-webkit-transition:all 2s ease;}

.map-item-border{position:absolute;top:50%;left:50%;display:none;}


.map-item-border:nth-child(1),.map-item-border:nth-child(2),.map-item-border:nth-child(3) {display: block;}
.map-item-border:nth-child(1) .map-back-border,.map-item-border:nth-child(2) .map-back-border,.map-item-border:nth-child(3) .map-back-border {-webkit-transform:rotate(198deg) skew(-54deg);}

.map-back-border {position:absolute;top:50%;left:50%;height:450px;width:475px;margin-top:-450px;transform-origin:0px 450px;
  background:grey;border:2px solid grey;box-sizing:border-box;}

#mapplus:hover,#mapminus:hover,#map:hover{background:#101010;border:3px solid #00E0FC;-webkit-transition:all .5s;}

#menu-radial-mapbutton-select {position:absolute;top:50%;left:50%;width:400px;height:400px;margin:-200px 0 0 -200px;
  border-radius:50%;list-style:none;overflow:hidden;-webkit-transform:scale(0.75);
  -webkit-transition:-webkit-transform .5s ease;z-index:12;box-sizing:border-box;}

#menu-radial-mapbutton-select.animate{-webkit-transform:scale(.78);-webkit-transition:-webkit-transform .5s ease;}

.map-back-select {position:absolute;top:50%;left:50%;height:450px;width:450px;margin-top:-450px;transform-origin:0px 450px;box-sizing:border-box;}

.map-item-select:nth-child(1),.map-item-select:nth-child(2),.map-item-select:nth-child(3) {display:block;}

.map-item-select:nth-child(1) .map-back-select {-webkit-transform:rotate(234.5deg) skew(-54deg);}

.map-item-select:nth-child(2) .map-back-select {-webkit-transform:rotate(198deg) skew(-54deg);}

.map-item-select:nth-child(3) .map-back-select {-webkit-transform:rotate(161.5deg) skew(-54deg);}

#plusselect,#mapselect,#minusselect{background:transparent;-webkit-transition:background .5s;}
#minusborder,#plusborder,#closemapborder{background:grey;-webkit-transition:background .5s;}
#minusborder.animate,#plusborder.animate,#closemapborder.animate,#plusselect.animate,#mapselect.animate,#minusselect.animate{background:#00E0FC;-webkit-transition:background .5s;}

.dial
{position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;z-index:10;border-radius:50%;z-index:5;overflow:hidden; background:url(http://anthony.germishuys.cloudvent.net/pics/dial2.png) no-repeat center;background-size:contain; 
-webkit-transform:scale(1.2);-webkit-transition:all 1s ease 4s;}

.visualization-background {position:absolute;
  display:block;
  width:200%;
  height:200%;
  top:0px;
  left:-50%;
  top: -50%;
  z-index:-1;
  background-color:transparent;
  background-image: 
linear-gradient(transparent 49px, rgba(87,193,232,.6) 49px,rgba(87,193,232,.6) 51px, transparent 51px),
linear-gradient(90deg, transparent 49px, rgba(87,193,232,.6) 49px,rgba(87,193,232,.6) 51px, transparent 51px),
linear-gradient(transparent 9px, rgba(87,193,232,.3) 9px,rgba(87,193,232,.3) 10px, transparent 10px),
linear-gradient(90deg, transparent 9px, rgba(87,193,232,.3) 9px,rgba(87,193,232,.3) 10px, transparent 10px);
  background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position:center;
  opacity:0;
  -webkit-transition:opacity 3s ease 5s;}




/*Downloaded from https://www.codeseek.co/anthonygermishuys/a-pen-by-anthony-xbBqJQ */
setTimeout(maptools,3000);   
 
function maptools() { 
$('#menu-radial-mapbutton,#menu-radial-mapbutton-border,#not').addClass('animate');
$('.map-item-border:nth-child(1),.map-item:nth-child(1)').css({'-webkit-transform':'rotate(36.5deg)','-webkit-transition':'-webkit-transform 2s ease 2s'});
$('.map-item-border:nth-child(2),.map-item:nth-child(2)').css({'-webkit-transform':'rotate(-36.5deg)','-webkit-transition':'-webkit-transform 2s ease 2s'});
$('.dial,#arrows').css({'-webkit-transform':'scale(.96)','-webkit-transition': 'all 1s ease 6s'});  
$('.visualization-background').css('opacity','1');
};   

$('#mapplus').hover(function(){
$('#menu-radial-mapbutton-select,#plusselect,#plusborder').addClass('animate');
},function(){
$('#menu-radial-mapbutton-select,#plusselect,#plusborder').removeClass('animate');
});

$('#mapminus').hover(function(){
$('#menu-radial-mapbutton-select,#minusselect,#minusborder').addClass('animate');
},function(){
$('#menu-radial-mapbutton-select,#minusselect,#minusborder').removeClass('animate');
});

$('#mapplus').click(function() {
$('#notches li:nth-child(1),#notches li:nth-child(2),#notches li:nth-child(3),#notches li:nth-child(4)').removeClass('animate');  
if($('#notches li:nth-child(7)').hasClass('animate')){$('#notches li:nth-child(8)').addClass('animate');}
if($('#notches li:nth-child(6)').hasClass('animate')){$('#notches li:nth-child(7)').addClass('animate');}
if($('#notches li:nth-child(5)').hasClass('animate')){$('#notches li:nth-child(6)').addClass('animate');}
$('#notches li:nth-child(5)').addClass('animate');
});

$('#mapminus').click(function() {
$('#notches li:nth-child(5),#notches li:nth-child(6),#notches li:nth-child(7),#notches li:nth-child(8)').removeClass('animate');
if($('#notches li:nth-child(2)').hasClass('animate')){$('#notches li:nth-child(1)').addClass('animate');}
if($('#notches li:nth-child(3)').hasClass('animate')){$('#notches li:nth-child(2)').addClass('animate');}
if($('#notches li:nth-child(4)').hasClass('animate')){$('#notches li:nth-child(3)').addClass('animate');}
$('#notches li:nth-child(4)').addClass('animate');
});


$('#map').hover(function(){
$('#menu-radial-mapbutton-select,#mapselect,#closemapborder').addClass('animate');
},function(){
$('#menu-radial-mapbutton-select,#mapselect,#closemapborder').removeClass('animate');
});

$('#map').click(function() {
$('#notches li').removeClass('animate');
$('.dial,#arrows').css({'-webkit-transform':'scale(1.2)','-webkit-transition':'all 2s ease 4s'});
$('.visualization-background').css({'opacity':'0','-webkit-transition':'opacity 2s ease 5s'});  
$('#menu-radial-mapbutton,#menu-radial-mapbutton-border,#menu-radial-mapbutton-select,#not').removeClass('animate');
$('.map-item:nth-child(1),.map-item:nth-child(2),.map-item-border:nth-child(1),.map-item-border:nth-child(2)').css({'-webkit-transform':'rotate(0deg)','-webkit-transition':'-webkit-transform 2s ease 1s'});
});

Comments