Skip to content

Instantly share code, notes, and snippets.

@landsurveyorsunited

landsurveyorsunited/a-fun-way-to-search-a-network-3d.markdown

Created March 8, 2022 20:54
Show Gist options
  • Save landsurveyorsunited/ee8acd9131a32fcb303c2332df9abee2 to your computer and use it in GitHub Desktop.
Save landsurveyorsunited/ee8acd9131a32fcb303c2332df9abee2 to your computer and use it in GitHub Desktop.
Download ZIP
A Fun Way to Search a Network 3D
Raw
a-fun-way-to-search-a-network-3d.markdown

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

A Pen by JFarrow on CodePen.

License.

Raw
index.html
<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>
Raw
script.js
$(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;
}
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
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;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment