https://wiskunststoffe.de/iseye-plugins/3D-Ball/js/cloudTag.js

1(function ($) {
2  $.fn.cloudTag = function (options) {
3    var defualts = {
4       tag:"tag"
5      ,fall3D:500
6    };
7    var intervalId = 0;
8    var opts = $.extend({}, defualts, options);
9    var tagEle = "querySelectorAll" in document ? document.querySelectorAll("."+opts.tag) : getClass(opts.tag),
10      paper = $(this)[0],
11      RADIUS = (paper.offsetWidth <= paper.offsetHeight) ? paper.offsetWidth/2-paper.offsetWidth/6 : paper.offsetHeight/2-paper.offsetHeight/6,
12      fallLength = opts.fall3D,
13      tags = [],
14      angleX = Math.PI/fallLength,
15      angleY = Math.PI/fallLength,
16      CX = paper.offsetWidth/2,
17      CY = paper.offsetHeight/2,
18      EX = paper.offsetLeft + paper.getBoundingClientRect().left,
19      EY = paper.offsetTop + paper.getBoundingClientRect().top;
20
21    function getClass(className){
22      var ele = document.getElementsByTagName("*");
23      var classEle = [];
24      for(var i=0;i<ele.length;i++){
25        var cn = ele[i].className;
26        if(cn === className){
27            classEle.push(ele[i]);
28        }
29      }
30      return classEle;
31    }
32
33    function innit(){
34      for(var i=0;i<tagEle.length;i++){
35        var a , b;
36        var k = (2*(i+1)-1)/tagEle.length - 1;
37        var a = Math.acos(k);
38        var b = a*Math.sqrt(tagEle.length*Math.PI);
39        // var a = Math.random()*2*Math.PI;
40        // var b = Math.random()*2*Math.PI;
41        var x = RADIUS * Math.sin(a) * Math.cos(b);
42        var y = RADIUS * Math.sin(a) * Math.sin(b);
43        var z = RADIUS * Math.cos(a);
44        var t = new tag(tagEle[i] , x , y , z);
45        tagEle[i].style.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
46        tags.push(t);
47        t.move();
48      }
49    }
50
51    Array.prototype.pforEach = function(callback){
52      for(var i=0;i<this.length;i++){
53          callback.call(this[i]);
54      }
55    }
56
57    function animate(){
58      clearInterval(intervalId);
59      intervalId = setInterval(function(){
60          rotateX();
61          rotateY();
62          tags.pforEach(function(){
63              this.move();
64          });
65      } , 10);
66    }
67
68    if("addEventListener" in window){
69      paper.addEventListener("mousemove" , function(event){
70        var x = event.clientX - EX - CX;
71        var y = event.clientY - EY - CY;
72        // angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
73        // angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
74        angleY = x*0.0001;
75        angleX = y*0.0001;
76//txt.innerHTML = event.clientX+" - "+event.clientY+" - ex: "+EX+" - ofW: "+paper.offsetWidth+" - "+paper.offsetLeft+" - ofH: "+paper.offsetHeight+" - ey: "+EY+" - "+paper.offsetTop+" - RADIUS: "+RADIUS;
77      });
78      paper.addEventListener("mouseleave" , function(event){
79        angleY = 0;
80        angleX = 0;
81      });
82    } else {
83      paper.attachEvent("onmousemove" , function(event){
84        var x = event.clientX - EX - CX;
85        var y = event.clientY - EY - CY;
86        angleY = x*0.0001;
87        angleX = y*0.0001;
88      });
89    }
90
91    function rotateX(){
92      var cos = Math.cos(angleX);
93      var sin = Math.sin(angleX);
94      tags.pforEach(function(){
95        var y1 = this.y * cos - this.z * sin;
96        var z1 = this.z * cos + this.y * sin;
97        this.y = y1;
98        this.z = z1;
99      })
100    }
101
102    function rotateY(){
103      var cos = Math.cos(angleY);
104      var sin = Math.sin(angleY);
105      tags.pforEach(function(){
106        var x1 = this.x * cos - this.z * sin;
107        var z1 = this.z * cos + this.x * sin;
108        this.x = x1;
109        this.z = z1;
110      })
111    }
112
113    var tag = function(ele , x , y , z){
114      this.ele = ele;
115      this.x = x;
116      this.y = y;
117      this.z = z;
118    }
119
120    tag.prototype = {
121      move:function(){
122        var scale = fallLength/(fallLength-this.z);
123        var alpha = (this.z+RADIUS)/(2*RADIUS);
124        this.ele.style.fontSize = 24 * scale + "px";
125        this.ele.style.opacity = alpha+0.5;
126        this.ele.style.filter = "alpha(opacity = "+(alpha+0.5)*100+")";
127        this.ele.style.zIndex = parseInt(scale*100);
128        this.ele.style.left = this.x + CX - this.ele.offsetWidth/2 +"px";
129        this.ele.style.top = this.y + CY - this.ele.offsetHeight/2 +"px";
130      }
131    }
132    
133    function refresh(){
134      CX = paper.offsetWidth/2;
135      CY = paper.offsetHeight/2;
136      EX = paper.offsetLeft + paper.getBoundingClientRect().left;
137      EY = paper.offsetTop + paper.getBoundingClientRect().top;
138    }
139
140    $(window).resize(function() {
141      refresh();
142    });
143
144    $(window).on('scroll', function() {
145      refresh();
146    })
147
148    innit();
149    animate();
150  }
151})(jQuery);