A Fun Way to Search a Network 3D
A Fun Way to Search a Network with 3D tags, in this case Land Surveyors United Network
<html><head> | |
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/><title>Land Surveyors United 3D Tag Cloud</title> | |
<link rel="shortcut icon" href="http://landsurveyorsunited.com/favicon.ico"/> | |
</head> | |
<body style="background-image: url(https://storage.ning.com/topology/rest/1.0/file/get/8759407491?profile=original);"><script type="text/javascript">//<![CDATA[try{(function(a){var b="http://",c="landsurveyorsunited.com",d="/cdn-cgi/cl/",e="img.gif",f=new a;f.src=[b,c,d,e].join("")})(Image)}catch(e){}//]]></script> | |
<div><a style="font-weight: bold; color: white;" href="https://landsurveyorsunited.com/main/authorization/signUp?target=http://landsurveyorsunited.com/community">Register</a> | |
<span style="color: white;">|</span> <a style="font-weight: bold; color: white;" href="https://landsurveyorsunited.com/main/authorization/signIn?target=http://landsurveyorsunited.com/community">Sign | |
In</a><span style="color: black;"> </span></div> | |
<div style="float: left;"><img style="width: 200px; height: 200px;" alt="Land Surveyors United Logo" src="https://storage.ning.com/topology/rest/1.0/file/get/9515246475?profile=original"/> </div> | |
<div id="list"> | |
<ul> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=students">students</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=exams">exams</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=history">History</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=tutorial">tutorial</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=software">software</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=surveyors">surveyors</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=location">location</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=how-to">how-to</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=Leica">Leica</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=Sokkia">Sokkia</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=Trimble">Trimble</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=Nikon">Nikon</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=Topcon">Topcon</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=GPS">GPS</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=Navcom">Navcom</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=mapping">mapping</a></li> | |
<li><a href="http://landsurveyorsunited.com/main/search/search?q=support">support</a></li> | |
</ul> | |
</div> | |
</body></html> |
$(document).ready(function(){ | |
var element = $('#list a');; | |
var offset = 0; var stepping = 0.03; | |
var list = $('#list'); | |
var $list = $(list) | |
$list.mousemove(function(e){ | |
var topOfList = $list.eq(0).offset().top | |
var listHeight = $list.height() | |
stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1; | |
}); | |
for (var i = element.length - 1; i >= 0; i--) | |
{ | |
element[i].elemAngle = i * Math.PI * 2 / element.length; | |
} | |
setInterval(render, 20); | |
function render(){ | |
for (var i = element.length - 1; i >= 0; i--){ | |
var angle = element[i].elemAngle + offset; | |
x = 120 + Math.sin(angle) * 30; | |
y = 45 + Math.cos(angle) * 40; | |
size = Math.round(40 - Math.sin(angle) * 40); | |
var elementCenter = $(element[i]).width() / 2; | |
var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px" | |
$(element[i]).css("fontSize", size + "pt"); | |
$(element[i]).css("opacity",size/100); | |
$(element[i]).css("zIndex" ,size); | |
$(element[i]).css("left" ,leftValue); | |
$(element[i]).css("top", y + "%"); | |
} | |
offset += stepping; | |
} | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
body{font-family:Arial,"MS Trebuchet",sans-serif;background-color:#111;}#list{margin:0 auto;height:600px;width:600px;overflow:hidden;position:relative;background-color:transparent;}#list ul,#list li{list-style:none;margin:0;padding:0;}#list a{position:absolute;text-decoration:none;color:#000;}#list a:hover{color:#a12712;} |