Question

HY，

我正试图复制这种效果https://2016.oneis.us/。我坚持使用BG动画。我已经看到这种效果也会在移动设备上运行。如果有人知道如何编程以及我需要什么样的JS库，请链接我一个教程或一些有用的链接。

感谢的!!!

Answer 1

你没有需要框架，只是让它变得更容易。

您可以使用：

P5.js
three.js所
Particles.js

Answer 2

只是为了好玩，也许是你的首发：）

＆＃13;

var frameRate = 60;
particles = [], x = 100, y = 100;


function handleMouseMove(event) {
  x = scene.offsetWidth / 2 - event.pageX;
  y = scene.offsetHeight / 2 - event.pageY;
};

function animate() {
  particles.forEach((p) => {
    p.move();
  });
};

function startAnimation() {
  this.timelineId = setInterval(animate, frameRate);
};

function stopAnimation() {
  clearInterval(this.timelineId);
};

function createParticle(src) {
  var img = document.createElement('img');

  img.src = src;
  img.width = 50 + Math.random() * 50;
  return new Particle(img);
};

function addToScene(scene, particle) {
  scene.appendChild(particle.img);
  particle.img.style.left = 100 * Math.random() + '%';
  particle.y = particle.dy = scene.offsetHeight + particle.img.offsetHeight;
  particles.push(particle);
};

function Particle(img) {
  this.img = img;
  this.dx = 0;
  this.dy = 0;
};

Particle.prototype.move = function() {
  this.dy -= 1 + y / 100;
  this.dx = x/2;
  if (this.dy < -4 * this.img.offsetHeight) {
    this.dy = this.y;
  }

  var s = `translate(${this.dx}px, ${this.dy}px)`;

  this.img.style.transform = s;
};

const scene = document.getElementById('scene');
var i = 0,
  id = setInterval(function() {
    if (i++ > 10) {
      clearInterval(id);
    }
    var p = createParticle('https://2016.oneis.us/images/0.png');
    addToScene(scene, p);
  }, 1000);

scene.onmousemove = handleMouseMove;



startAnimation();

＆＃13;

* {
  font-family: sans-serif;
  box-sizing: border-box;
}

#scene {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

#scene img {
  position: relative;
}

＆＃13;

<h3>What is Lorem Ipsum?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div id="scene"></div>

＆＃13;

浮动元素在背景中对mousemove有反应

2 个答案: