3D Tag Cloud Script

DerUser · 16. Januar 2014

ich suche ein anpassbares script für so eine wolke:

am liebsten das: http://www.lrworld.com/de/

habe auch noch andere varianten gefunden aber so soll es nicht sein

http://www.roytanck.com/tag-cloud

http://niklasknaack.blogspot.de/2009/11/3d-tag-cloud.html

mein bisheriger code:

JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery 3D</title>
<style type="text/css" media="screen">
body{
font: 1em arial, verdana, sans-serif;
background: #111;
}
#list{
margin:0 auto;
height:500px;
width:500px;
overflow:hidden;
position:relative;
background-color: #000;
}
#list ul, #list li{
list-style:none;
margin:0;
padding:0;
}
#list a{
position:absolute;
text-decoration: none;
color:#666;
}
#list a:hover{
color:#ccc;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="list">
<ul>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
<li><a href="#">Testlink</a></li>
</ul>
</div>




<script type="text/javascript">
$(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>
</body>
</html>

Alles anzeigen

Bei meiner Variante ist nur leider nicht so wie in den beiden Links oben, sprich es dreht sich zu schnell und die Textgrösse ist zu groß.

hat wer erfahrung mit diesen dingern.
ich kann zwar etwas html aber jquery ist mir fremd

Basi · 16. Januar 2014

Die von dir präsentierten Beispiele sind eher mit Flash realisiert, HTML 5 versucht Flash ja nun seit einiger Zeit mit Canvas (eng) zu verdrängen und löst das auch ganz gut. Möchtest du eine moderate Cloud empfiehlt sich auf die Arbeit anderer zurückzugreifen, da wäre zum Beispiel diese ausgezeichnete Kombination aus Canvas und JavaScript von Graham Breach (siehe hier).

Wenn es dir ganz speziell um dein Script geht dann musst du lediglich beim berechnen der Variable stepping etwas komplizierter vorgehen, ein möglicher Ansatz wäre zum Beispiel folgender:

JavaScript

$(document).ready(function(){




var element = $('#list a');
var offset = 0;
var stepping = 0.005;
var moveSpeed = stepping;
var maxSpeed = 0.02;
var list = $('#list');
var $list = $(list);




$list.mousemove(function(e){
  var topOfList = $list.eq(0).offset().top;
  var listHeight = $list.height();




  if(e.clientY > listHeight){
    return false; }




  function evalPerc(l,h){
    return 100/(h/l); }




  if(e.clientY == listHeight/2){
    stepping = 0;
  } else if(e.clientY < listHeight/2){
    stepping = moveSpeed*20/evalPerc(e.clientY, listHeight);
    if(stepping>maxSpeed){
      stepping = maxSpeed;
    }
  } else {
    stepping = -moveSpeed*20/(50-(evalPerc(e.clientY, listHeight)-50));
    if(stepping<-maxSpeed){
      stepping = -maxSpeed;
    }
  }
});




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/2 + "pt");
    $(element[i]).css("opacity",size/100);
    $(element[i]).css("zIndex" ,size);
    $(element[i]).css("left" ,leftValue);
    $(element[i]).css("top", y + "%");
  }
  offset += stepping;
}
});

Alles anzeigen

Die Schriftgröße bestimmst du doch selbst, ich habe mir die Freiheit genommen sie um 50% zu reduzieren, das kannst du aber selber anpassen. Mit den Variablen stepping und maxSpeed, welche am Anfang gesetzt werden, kannst du ein wenig herumspielen um die Geschwindigkeit anzupassen, es gibt jedoch deutlich bessere Wege.

DerUser · 16. Januar 2014

Ich danke, danke, danke, danke, danke dir vielmals. Ich hab den Code schon Jahre(bisher einfach nicht die Zeit gehabt in der Richtung zu lernen) und endlich siehts aus wie ich gerne hätte

Da wäre ich nie drauf gekommen das man durch erhöhen der Zahl die Schrift kleiner bekommt

JavaScript

$(element[i]).css("fontSize", size/5 + "pt");

Basi · 16. Januar 2014

Der Schrägstrich bedeutet dividieren, das Ergebnis wird also kleiner wenn wir den Divisor (die 2. Zahl) erhöhen:

Code

100 /  5 = 20
100 / 10 = 10

Ich würde sagen da hattest du vielleicht einen kleinen Denkfehler

Mit jQuery kannst du die CSS Angaben übrigens auch noch kürzen:

JavaScript

$(element[i]).css({
  "fontSize": size/5 + "pt",
  "opacity":  size/100,
  "zIndex":   size,
  "left":     leftValue,
  "top":      y + "%"
});

3D Tag Cloud Script

Jetzt mitmachen!

Teilen