围绕居中图像浮动图像

Question

我搜索了几天 javascript 动画库以及 css 这种 images floating with strings attached to the center image 配置的示例。首先，我尝试了 using this code from this example，但我找不到一种方法来为旋转功能设置动画，因此图像（在这个例子中被视为按钮）将围绕居中按钮浮动并附加一个字符串。我希望我能表达自己，我也把这个问题的最后一部分全部恢复了。

这是该示例的 jquery 代码：

var angleStart = -360;

// jquery rotate animation
function rotate(li,d) {
$({d:angleStart}).animate({d:d}, {
    step: function(now) {
        $(li)
           .css({ transform: 'rotate('+now+'deg)' })
           .find('label')
              .css({ transform: 'rotate('+(-now)+'deg)' });
    }, duration: 0
});
}

// show / hide the options
function toggleOptions(s) {
$(s).toggleClass('open');
var li = $(s).find('li');
var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
for(var i=0; i<li.length; i++) {
    var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
    $(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
}
}

$('.selector button').click(function(e) {
toggleOptions($(this).parent());
});

setTimeout(function() { toggleOptions('.selector'); }, 100);

此函数使圆圈从中心和围绕中心圆旋转。

所以继续这个堆栈问题：

我需要浮动（这意味着它们将在 x 和 y 上移动，但有一个限制，因此它们不会与其他图像重叠）img 围绕居中的 img 同时附加到字符串 like represented in this img.
我需要在用户滚动时显示它们，我尝试使用 on( 'scroll', ... ) 但是这个例子使用了这个 toggleOptions 并且它传递了这个 "s"我不明白它的作用的参数。
如果你能告诉我一种在浮动 img 和中心 img 之间画一条线的方法，那就太好了。

Answer 1

我实际上能够用 p5.js 做到这一点。 Here is the CodePen。如果有人想克隆它，我会把它放在我的 github 和 link 上。

编辑： Github Link

这里是javascript代码：

var canvas;
var width = window.innerWidth;
var height = window.innerHeight;
let angle = 0;
var unitSize = [125,125,125,125,125,125,125,125,125];
var xoff = [0,1,2,3,4,5,6,7,8];
var x = [0,1,2,3,4,5,6,7,8];
var circles = [0,1,2,3,4,5,6,7,8];
var images = [0,1,2,3,4,5,6,7,8];

// function preload(){
//  images[0] = loadImage('images/img0.jpg'); 
//  images[1] = loadImage('images/img1.jpg');
//  images[2] = loadImage('images/img2.jpg');
//  images[3] = loadImage('images/img3.jpg');
//  images[4] = loadImage('images/img4.jpg');
//  images[5] = loadImage('images/img5.jpg');
//  images[6] = loadImage('images/img6.jpg');
//  images[7] = loadImage('images/img7.jpg');
//  images[8] = loadImage('images/img8.jpg');
//  images[9] = loadImage('images/img9.jpg');
// }

function setup() {
  canvas = createCanvas(window.innerWidth, window.innerHeight);       
  //use WEBGL when using texture()
  canvas.parent("canvas"); 
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

//if you don't want to spin it when scroll delete this
function mouseWheel(event) {
  angle += (event.delta)*0.001;
}


function draw() {
  //delete this line when using WEBGL
  translate(width/2,height/2);
  noStroke();
  background( 255 );
  fill(126);
  ellipse(0, 0, 260, 260); 
  //texture(images[9]);
  //rotate the black ellipses
  rotate(angle);
  //rotation speed
  angle = angle + 0.0007;
  //using noise() to get smooth random x values and using xoff to get different random values for each black ellipse
  for (var i = x.length - 1; i >= 0; i--) {
    x[i] = map(noise(xoff[i]), 0 , 1 , 200 , 230);
    xoff[i] += 0.01;
  }
  //draw the black ellipses
  for( var i = 0; i < circles.length; i++) {
    rotate( TWO_PI/9.0 );
    //texture(images[i]);
    stroke(0);
    line( 0, 0,x[i],0);   
    fill(0);
    //draw each ellipse with different x value
    ellipse( x[i], 0, unitSize[i], unitSize[i] ); 
  }  
}

这里是HTML代码：

（但不要忘记导入脚本）

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
      <style> body {padding: 0; margin: 0;} </style>
    </head>
    <body>
      <div id="canvas" style="height: 100%;width: 100%"></div>
    </body>
  </html>

围绕居中图像浮动图像

Floating images around a centered image

html

css

jquery

jquery-animate