canvas粒子动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  background: #1f1f1f;
}

.followers {
  position: fixed;
  z-index: 3;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -25%) rotate(-10deg);
          transform: translate(-50%, -25%) rotate(-10deg);
  width: 64vw;
  height: 28vw;
  fill-rule: evenodd;
  fill: none;
  stroke: #ffbd36;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dashoffset: 1006px;
  stroke-dasharray: 1006px;
}
.followers.stroke {
  stroke: #fff;
  z-index: 2;
  -webkit-transform: translate(-50%, -24%) rotate(-10deg);
          transform: translate(-50%, -24%) rotate(-10deg);
  stroke-width: 10px;
}
.followers.shadow {
  stroke: black;
  z-index: 0;
  opacity: .1;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  -webkit-transform: translate(-50%, -22%) rotate(-10deg);
          transform: translate(-50%, -22%) rotate(-10deg);
  stroke-width: 8px;
}

JavaScript

/*--------------------
Settings
--------------------*/
const palette = [
  '#21272f',
  '#ffbd36',
  '#ff2629',
  '#00abe5',
]

/*--------------------
Setup
--------------------*/
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const win = {
  w: window.innerWidth,
  h: window.innerHeight
}
const mouse = {
  x: win.w / 2,
  y: win.h / 2,
}
let time = 0
let devicePixelRatio = window.devicePixelRatio || 1
const minArc = window.innerWidth > 500 ? 3 : 1

/*--------------------
Particle
--------------------*/
class Particle {
  constructor({x, y}) {
    this.x = x
    this.y = y
    this.alpha = 100
    this.arc = minArc + Math.random() * 3
    this.color = palette[Math.floor(Math.random() * palette.length)]
    this.arcX = minArc + Math.random() * 2
    this.arcY = minArc + Math.random() * 2
    this.offset = -2 + Math.random() * 4
  }
  draw(t) {
    ctx.fillStyle = this.color
    ctx.beginPath()
    ctx.arc(this.newX, this.newY, this.arc, 0, Math.PI * 2)
    ctx.closePath()
    ctx.fill()
    this.newX = this.x + this.arcX * Math.sin(t * this.offset)
    this.newY = this.y + this.arcY * Math.cos(t * this.offset)
  }
}

/*--------------------
Settings
--------------------*/
let Particles = []
const num = 12000
let i = 0

/*--------------------
Clear
--------------------*/
const clear = () => {
  ctx.clearRect(0, 0, win.w, win.h)
}

/*--------------------
Draw
--------------------*/
const draw = () => {
  const t = window.performance.now() * 0.001
  Particles.forEach((p, i) => {
     p.draw(t)
  })
}

/*--------------------
Animate
--------------------*/
const animate = () => {
  time += 0.1
  clear()
  draw()
  requestAnimationFrame(animate)
}

/*--------------------
Loop
--------------------*/
let n = 0
const loop = () => {
  for (let i = 0; i < num - 1; i++) {
    const x = Math.round(Math.random()*win.w)
    const y = Math.round(Math.random()*win.h)
    if (ctx.getImageData(x, y, 1, 1).data[3] == 255) {
      Particles.push(new Particle({x,y}))
      n++
    }
  }
  animate()
  gsap.from(Particles, {
    x: win.w / 2,
    duration: 1.6,
    ease: 'power3.inOut',
    stagger: -.001,
  })
  gsap.from(Particles, {
    y: - 10,
    a: 0,
    duration: 1.4,
    ease: 'power2.inOut',
    stagger: -.001,
  })
  gsap.to('.followers', {
    strokeDashoffset: '0px',
    ease: 'sine.out',
    duration: 5,
    delay: 2,
  })
}

/*--------------------
Init
--------------------*/
const init = () => {
  ctx.save()
  ctx.translate(win.w/2, win.h/2)
  ctx.fillStyle = 'black'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.font = `bold ${win.w*.36}px Arial, Helvetica, sans-serif`
  ctx.fillText('3000', 0, 0)
  ctx.restore()
  ctx.scale(devicePixelRatio, devicePixelRatio)
  Particles = []
  loop()
} 
init()

/*--------------------
Resize
--------------------*/
const onResize = () => {
  devicePixelRatio = window.devicePixelRatio || 1
  win.w = window.innerWidth
  win.h = window.innerHeight
  canvas.width = win.w * devicePixelRatio
  canvas.height = win.h * devicePixelRatio
  canvas.style.width = `${win.w}px`
  canvas.style.height = `${win.h}px`
  init()
}
onResize()

/*--------------------
Listeners
--------------------*/
window.addEventListener('resize', onResize)

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg