时间戳

首页 > 解决方案 > Particles.js 在 3D 画布上向用户移动

html - Particles.js 在 3D 画布上向用户移动

问题描述

我有 Particles.js 在我的网站上作为背景工作，但是我希望粒子向前移动，朝向用户以及左右移动，所以它是 3D 画布而不是 2D 画布，这可能吗？

我正在考虑对 z-index 使用变换，但我似乎无法让它工作，即便如此我想它会让整个粒子画布向前移动，而不是粒子本身。

任何帮助都非常感谢:)

标签： htmlcanvasparticles.js

解决方案

请看一下这个效果。学分转到https://codepen.io/Sonick/

https://codepen.io/Sonick/pen/HDngF

// 旧答案

我不知道这个插件中是否有可能，但也许这可以满足您的需求：https ://codepen.io/prowseed/pen/yGjgBq

/* SCSS */

html, body {
  height: 100%;
}
body {
  background: black;
  min-height: 100%;
  overflow: hidden;
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1400px);
  }
}
.container {
  position: relative;
  width: 100%;
  min-height: 100%;
  transform-style: preserve-3d;

}
.bubble-wrap {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  transform-style: preserve-3d;
  transform-origin: center center;
  perspective: 600px;
}
.bubble {
  position: absolute;
  background: black;
  opacity: .7;
  border-radius: 50%;
  animation: move 3s infinite;

}

@for $i from 1 through 100 {
  .bubble:nth-child(#{$i}){
     $size: random(30)+px;
     height: $size;
     width: $size;
     animation-delay: -$i * .2s;
     transform: translate3d( (random(1000) * 1px),  (random(1000) * 1px), (random(2000) * -1px));
     background: hsl( random(360) , 70%, 50%);
  }

}

<div class="container">
  <div class="bubble-wrap">
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
</div>
</div>

推荐阅读