文本龙卷风 CSS

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

/*--------------------
Vars
--------------------*/
let time = 0
let mouseX = window.innerWidth * 0.75
let x = 0

/*--------------------
Options
--------------------*/
const opt = {
  radius: 100,
  radiusY: 0.4,
  maxSpeed: 0.05,
  maxRotation: 50,
  minOpacity: 0.3,
  spacer: '*'
}

/*--------------------
Utils
--------------------*/
const scale = (a, b, c, d, e) => {
  return (a - b) * (e - d) / (c - b) + d
}
const lerp = (v0, v1, t) => {
  return v0 * (1 - t) + v1 * t
}

/*--------------------
Create Invaders
--------------------*/
const createInvaders = () => {
  const word = document.querySelector('.word')
  const Letters = word.innerHTML.replace(/\s/g, opt.spacer).split('').reverse()
  word.innerHTML = ''
  Letters.forEach(i => {
    const l = document.createElement('span')
    l.innerHTML = i
    word.appendChild(l)
  })
}
createInvaders()
const letter = document.querySelectorAll('.word span')

/*--------------------
Animate
--------------------*/
const animate = () => {
  if (!letter) return
  
  x = lerp(x, mouseX / window.innerWidth, 0.1)
  const rotation = -opt.maxRotation + x * opt.maxRotation * 2
  const speed = (-opt.maxSpeed + x * opt.maxSpeed * 2)
  const modY = 1 + x * -2

time -= speed

letter.forEach((i, ind) => {
    const theta = 1 - ind / letter.length
    const x = opt.radius * Math.sin(time + theta * Math.PI * 2)
    const y = opt.radius * opt.radiusY * Math.cos(modY + time + theta * Math.PI * 2)
    const s = scale(y, -opt.radius * opt.radiusY, opt.radius * opt.radiusY, opt.minOpacity, 1)

Object.assign(i.style, {
      zIndex: Math.min(2, Math.max(-2, Math.ceil(y))),
      filter: `blur(${4 - 5 * s}px)`,
      opacity: s,
      transform: `translate3d(${x}px, ${y}px, 0) rotate(${rotation}deg)`
    })

})
  requestAnimationFrame(animate)
}
animate()

/*--------------------
Events
--------------------*/
const handleMouse = e => {
  mouseX = e.clientX || e.touches[0].clientX
}
window.addEventListener('mousemove', handleMouse)
window.addEventListener('touchstart', handleMouse)
window.addEventListener('touchmove', handleMouse)

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