Question

我搜索了几天的javascript动画库，还搜索了images floating with strings attached to the center image这种配置的css示例。首先，我尝试了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上并链接到这里。

修改： 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>

围绕中心图像浮动图像

1 个答案: