可定制的字符满天星动画

letter particle animation

css, particle, 文本效果

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1096
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function init() {
  
  const letters = [
    //a
    '0000000000000000000000000000000000000001100000000000001111000000000001100110000000000110011000000000110000110000000011000011000000011111111110000001111111111000001100000000110000110000000011000110000000000110011000000000011000000000000000000000000000000000', 
    //b
    '0000000000000000000000000000000000011111110000000011111111110000001100000011000000110000000110000011000000011000001111111111000000111111111110000011000000001100001100000000110000110000000111000011111111111000000111111111000000000000000000000000000000000000',
    //c
    '0000000000000000000000000000000000000011111000000000111111111000000111000001110000011000000011000011000000000000001100000000000000110000000000000011000000000000000110000000110000011100000111000000111111111000000000111110000000000000000000000000000000000000',
    //d
    '0000000000000000000000000000000000011111110000000011111111110000001100000011000000110000000110000011000000001100001100000000110000110000000011000011000000001100001100000001110000110000001110000011111111110000000111111100000000000000000000000000000000000000',
    //e
    '0000000000000000000000000000000000111111111100000011111111111000001100000000000000110000000000000011000000000000001111111111000000111111111100000011000000000000001100000000000000110000000000000011111111111000000111111111000000000000000000000000000000000000',
    //f
    '0000000000000000000000000000000000111111111110000011111111111000001100000000000000110000000000000011000000000000001111111111000000111111111100000011000000000000001100000000000000110000000000000011000000000000000100000000000000000000000000000000000000000000',
    //g
    '0000000000000000000000000000000000000011111000000000111111111000000111000001110000011000000000000011000000000000001100000000000000110000001111100011000000111110000110000000110000011100000111000000111111111000000000111110000000000000000000000000000000000000',
    //h
    '0000000000000000000000000000000000010000000011000011000000001100001100000000110000110000000011000011000000001100001111111111110000111111111111000011000000001100001100000000110000110000000011000011000000001100000100000000100000000000000000000000000000000000',
    //i
    '0000000000000000000000000000000000000111111000000000011111100000000000011000000000000001100000000000000110000000000000011000000000000001100000000000000110000000000000011000000000000001100000000000011111100000000001111100000000000000000000000000000000000000',
    //j
    '0000000000000000000000000000000000000011111110000000011111111100000000000110000000000000011000000000000001100000000000000110000000000000011000000000000001100000000011000110000000000100011000000000001111100000000000011000000000000000000000000000000000000000',
    //k
    '0000000000000000000000000000000000110000000110000011000000111000001100000111000000110000111000000011000111000000001101111000000000111111000000000011101110000000001100011110000000110000011100000011000000111000001100000001100000000000000000000000000000000000',
    //l
    '0000000000000000000000000000000000011000000000000001100000000000000110000000000000011000000000000001100000000000000110000000000000011000000000000001100000000000000110000000000000011000000000000001111111111000000111111111100000000000000000000000000000000000',
    //m
    '0000000000000000000000000000000000010000000010000011100000011100001111000011110000111110011111000011011111101100001100111100110000110001100011000011000000001100001100000000110000110000000011000011000000001100000100000000100000000000000000000000000000000000',
    //n
    '0000000000000000000000000000000000010000000011000011100000001100001111000000110000111110000011000011011100001100001100111000110000110001110011000011000011101100001100000111110000110000001111000011000000011100000100000000110000000000000000000000000000000000',
    //o
    '0000000000000000000000000000000000000011110000000000111111100000000111000011100000011000000110000011000000001100001100000000110000110000000011000011000000001100000110000001100000011100001100000000111111100000000000111100000000000000000000000000000000000000',
    //p
    '0000000000000000000000000000000000111111111000000011111111110000001100000011100000110000000110000011000000011000001100000011100000111111111100000011111111100000001100000000000000110000000000000011000000000000001100000000000000000000000000000000000000000000',
    //q
    '0000000000000000000000000000000000000011110000000000111111110000000011000011000000011000000110000011000000001100001100000000110000110000110011000011000011101100000110000111100000011100001110000000111111111100000000111100110000000000000000000000000000000000',
    //r
    '0000000000000000000000000000000000011111111000000011111111110000001100000011000000110000000110000011000000111000001111111111000000111111111000000011011100000000001100111000000000110001111000000011000001111000000100000011000000000000000000000000000000000000',
    //s
    '0000000000000000000000000000000000001111111000000001111111110000001110000011100000110000000110000011100000000000000111111100000000000111111100000000000001111000001100000001100000111000001110000001111111110000000011111110000000000000000000000000000000000000',
    //t
    '0000000000000000000000000000000000001111111100000001111111111000000000011000000000000001100000000000000110000000000000011000000000000001100000000000000110000000000000011000000000000001100000000000000110000000000000011000000000000000000000000000000000000000',
    //u
    '0000000000000000000000000000000000010000000010000011000000001100001100000000110000110000000011000011000000001100001100000000110000110000000011000011000000001100001100000000110000011000000110000000111111110000000001111110000000000000000000000000000000000000',
    //v
    '0000000000000000000000000000000000000000000000000011000000001100001100000000110000011000000110000001100000011000000011000011000000001100001100000000011001100000000001100110000000000011110000000000000110000000000000011000000000000000000000000000000000000000',
    //w
    '0000000000000000000000000000000000100000000001000110000000000110011000000000011001100000000001100110000110000110011000011000011001100011110001100110011111100110001101100110110000111110011111000001110000111000000010000001000000000000000000000000000000000000',
    //x
    '0000000000000000000000000000000000010000000010000011100000011100000111000011100000001110011100000000011111100000000000111100000000000011110000000000011111100000000011100111000000011100001110000011100000011100001100000000100000000000000000000000000000000000',
    //y
    '0000000000000000000000000000000000110000000011000011100000011100000111000011100000001110011100000000011111100000000000111100000000000001100000000000000110000000000000011000000000000001100000000000000110000000000000011000000000000000000000000000000000000000',
    //z
    '0000000000000000000000000000000000011111111110000011111111111100000000000001110000000000001110000000000001110000000000001110000000000001110000000000001110000000000001110000000000001110000000000001111111111100000111111111110000000000000000000000000000000000',
    //space
    '0'
  ]

const letterIndex = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ '

const animationPatterns = [
    ['0','1'],['0','1'],['0','1'],['0','1'],['0','1'],['0','1'],['0','1'],
    ['2','2'],['2','2'],['2','2'],['2','2'],
    ['1','1'],['1','1'],['1','1'],['1','1'],
    ['0','2'],['0','2'],
    ['3','5'],['3','5'],
    ['8','9'],['8','9'],
    ['3','6'],['3','6'],
    ['9','10'],['9','10'],
    ['10','10'],['10','10'],
    ['3','7'],
    ['6','7']

]
  const wrapper = document.querySelector('.wrapper')
  const grid = document.querySelector('.grid')
  const input = document.querySelector('input')
  const button = document.querySelector('button')
  const instruction = document.querySelector('.instruction')
  const frameSize = 15

let pos = []
  let mappedPos
  let prevMappedPos = []
  let timer = 5
  let interval

//star blinking animation
  const animateStar = (target, start, end, speed) => {
    let i = start   
    setInterval(function () {
      target.style.margin = `0px ${-(i * frameSize)}px`
      if (i >= end) {
        i = start
      } else {
        i++
      }
    }, speed)
  }

//position stars
  const stars = new Array(100).fill('')
  stars.forEach(()=>{

const animationPattern = animationPatterns[Math.floor(Math.random() * animationPatterns.length)]
    const speed = Math.random() < 0.1 ?
      140
      :
      300

const starDiv = document.createElement('div')
    starDiv.classList.add('star')
    
    const starInside = document.createElement('div')
    starInside.classList.add('star_inner')
    starInside.innerHTML = starSvg
    starInside.style.width = `${frameSize * 11}px`

starDiv.appendChild(starInside)
    starDiv.style.top = `${Math.ceil(Math.random() * 100)}%`
    starDiv.style.left = `${Math.ceil(Math.random() * 100)}%`
    wrapper.appendChild(starDiv)

animateStar(starInside, animationPattern[0], animationPattern[1], speed)
  })

//create grid
  grid.innerHTML = new Array(256).fill('').map((_cell,i)=>{
    return `
      <div class=cell id=${i} >
      </div>
    `
  }).join('')
  wrapper.appendChild(grid)
  const cells = document.querySelectorAll('.cell')

//create letter
  const createLetter = letter =>{
    const textCode = letter.split('')
    pos = []
    textCode.forEach((cell, i)=> cell === '1' ? pos.push(i) : null)

mappedPos = pos.map(p=>{
      return {
        x: cells[p].getBoundingClientRect().x,
        y: cells[p].getBoundingClientRect().y
      }
    })
  }

//position
  const setPosition = ()=>{
    const stars = document.querySelectorAll('.star')
  
    stars.forEach((star,i)=>{
      const offsetX = Math.ceil(Math.random() * 5) - 5
      const offsetY = Math.ceil(Math.random() * 5) - 5
      if (i >= mappedPos.length) return
      star.style.top = `${mappedPos[i].y + offsetY}px`
      star.style.left = `${mappedPos[i].x + offsetX}px`
      star.style.opacity = '1'
      star.style.backgroundColor = Math.random() < 0.5 ? 'rgba(195, 232, 253, 0.1)' : ''
    })
  }

const setRandomPosition = () =>{
    const stars = document.querySelectorAll('.star')
    stars.forEach((star,i)=>{
      if (i >= prevMappedPos.length) return
      star.style.top = `${Math.ceil(Math.random() * 100)}%`
      star.style.left = `${Math.ceil(Math.random() * 100)}%`
      star.style.opacity = '0.3'
      star.style.backgroundColor = 'transparent'
    })
  }

const readjustPosition = ()=>{
    createLetter(letters[letterIndex.indexOf(currentLetter)])
    setRandomPosition()
    setPosition()
  }

//letter animation
  const animateLetterWithKeyboard = e =>{
    clearInterval(interval)
    const keyPressed = e.key.toUpperCase()
    instruction.style.opacity = 0
    timer = 5
    if (letterIndex.indexOf(keyPressed) === -1) return

createLetter(letters[letterIndex.indexOf(keyPressed)])
    setRandomPosition()
    setPosition()
    prevMappedPos = mappedPos
    currentLetter = keyPressed
  }
  
  const animateLettersFromInput = (value, index) =>{
    const selectedLetter = value[index].toUpperCase()
    const selectedLetterIndex = letterIndex.indexOf(selectedLetter)
    createLetter(letters[selectedLetterIndex])
    setRandomPosition()
    setPosition()
    prevMappedPos = mappedPos
    currentLetter = selectedLetter
  }

const triggerAnimateLettersFromInput = ()=>{
    clearInterval(interval)
    const lettersToAnimate = input.value
    let letterCount = 0 
    timer = (input.value.length * 1.5) + 5
    
    interval = setInterval(()=>{
      if (letterCount >= lettersToAnimate.length){
        clearInterval(interval)
        return
      }    
      animateLettersFromInput(lettersToAnimate, letterCount)
      letterCount++
    },1500)
  }

//event
  document.addEventListener('keydown', animateLetterWithKeyboard)
  window.addEventListener('resize', readjustPosition)
  button.addEventListener('click', triggerAnimateLettersFromInput)

// initial setup
  createLetter(letters[0])
  setRandomPosition()
  setPosition()
  prevMappedPos = mappedPos
  let currentLetter = letterIndex[0]
  
  // makes instruction appear when no action
  setInterval(()=>{
    if (!timer) return
    timer--
    if (timer === 0) instruction.style.opacity = 1
  },1000)
}

window.addEventListener('DOMContentLoaded', init)

编译

CSS

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: serif;
  background-color: #010044;
}

.outer_wrapper{
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.wrapper {
  width: 100%;
  height: 100%;
}

.flex_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.sign {
  position: absolute;
  color: white;
  bottom: 10px;
  right: 10px;
  font-size: 10px;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.grid {
  height: 240px;
  width: 240px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  height: calc(100% / 16);
  width: calc(100% / 16);
  font-size: 10px;
}

.star {
  position: absolute;
  transition: 1s;
  overflow: hidden;
  opacity: 0.3;
  height: 15px;
  width: 15px;
  border-radius: 50%;
}

.star svg {
  height: 100%;
  width: auto;
}

.star_inner {
  height: 15px;
}

.instruction {
  position: absolute;
  top: 30px;
  color: rgb(255, 255, 255);
  font-style: italic;
  text-align: center;
  transition: 1s;
  width: 300px;
  opacity: 0;
}

.input_wrapper {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

input, button {
  border-width: 0;
  border-radius: 50px;
  padding: 10px 16px;
  margin: 5px;
}

button {
  color: white;
  background-color: steelblue;
  transition: 0.3s;
}

button:hover {
  color: steelblue;
  background-color: white;
}

HTML

letter particle animation

css, particle, 文本效果

编辑器支持Emmet

快捷键

letter particle animation

css, particle, 文本效果

5款嬉皮士风格的文本动画特效（可定制文本）

HTML5 Canvas可定制的粒子游泳动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：