TextParticle
Create high performance particle transition effects for text and image.
Preview
Installation
Install text-particle using npm:
npm install text-particleUsage
The library contains two particle effects:
- TextParticle
- ImageParticle
If you want to render particles with high performance, enable the option 'enableWebGL'.
If you want to run yourself, see Example
You can get more details from the sample:
text particle effect:
function renderTextParticle() {
const text = ['Klee', 'Ganyu']
const color = ['#e75945', '#80b0e1']
const root = document.getElementById('container_1')
if (!root) {
return
}
const particleEffect = new TextParticle(root, {
source: text[0],
color: color[0],
// Custom font need to set in css '@font-face' first
font: 'bold 200px lai',
textAlign: 'center',
particleGap: 6,
particleRadius: 3,
showMouseCircle: true,
enableContinuousEasing: true,
enableWebGL: true
})
particleEffect.render()
// tips: If you enable the option 'enableContinuousEasing'
// the transition time will not work.
particleEffect.transitionTo(
text[1],
6000,
{ color: color[1] }
)
fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe(() => {
particleEffect.resize()
})
}image particle effect:
function renderImageParticle() {
const images = ['/image1.png', '/image2.png']
const root = document.getElementById('container_2')
if (!root) {
return
}
const particleEffect = new ImageParticle(root, {
source: images[0],
// color: '#ffffff',
autoFit: true,
particleGap: 4,
particleRadius: 2,
showMouseCircle: true,
enableContinuousEasing: true,
enableWebGL: true,
// it is important to filter color
pixelFilter: (r, g, b, a) => {
return (r + g + b) > 0 && a > 10
}
})
particleEffect.render()
// tips: If you enable the option 'enableContinuousEasing'
// the transition time will not work.
particleEffect.transitionTo(images[1], 6000)
fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe(() => {
particleEffect.resize()
})
}