How to use HTML5+css3 to achieve particle effect text animation special effects (complete code attached)

When we browse web pages, we will find that the current web pages are becoming more and more beautiful, and many animation special effects are becoming more and more cool. This is inseparable from the in-depth development of HTML5 and CSS3. Today we are going to share a text effect based on HTML5 and CSS3 - particle effect text animation effect. The content of this article is about how to use HTML5 css3 to realize particle effect text animation special effects. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The principle of particle effect text animation special effects

When we get a piece of text, we can put it in PS to enlarge it and observe it. The text is composed of a It is drawn with small pixels of different colors, so what the particle effect text animation special effects need to do is to reduce the number of pixels to make the pixels into circles, and then piece together the text content. In general, the input information is converted into a picture, the pixel information of the picture is read, and the picture is roughly divided into blocks, and the pixels in each area are traversed to determine whether the block needs to draw a particle.

Steps to achieve particle effect text animation special effects

Step 1: Convert text to image and insert into canvas

function loadCanvas(value) {
    var fontSize = 100,
        width = calWordWidth(value, fontSize), 
        canvas = document.createElement('canvas')
    canvas.id = 'b_canvas'
    canvas.width = width 
    canvas.height = fontSize
    var ctx = canvas.getContext('2d')
    ctx.font = fontSize + "px Microsoft YaHei"
    ctx.fillStyle = "orange"
    ctx.fillText(value, 0, fontSize / 5 * 4)
    getImage(canvas, ctx)
}
function getImage(canvas, ctx) {
    var image = new Image()
    image.src = canvas.toDataURL("image/jpeg")
    image.onload = function() 
}

Step 2: Reduce the number of pixels

var imageData = ctx.getImageData(0, 0, this.width, this.height)
var dataLength = imageData.data.length
var diff = 4 
var newCanvas = document.getElementById('canvas')
var newCtx = newCanvas.getContext('2d')
for (var j = 0; j < this.height; j += diff) {
    for (var i = 0; i < this.width; i += diff) {
        var colorNum = 0
        for (var k = 0; k < diff * diff; k++) {
            var row = k % diff
            var col = ~~(k / diff)
            let r = imageData.data[((j + col) * this.width + i + row) * 4 + 0]
            let g = imageData.data[((j + col) * this.width + i + row) * 4 + 1]
            let b = imageData.data[((j + col) * this.width + i + row) * 4 + 2]
            if (r < 10 && g < 10 && b < 10) colorNum++ 
        }
        if (colorNum < diff * diff / 3 * 2) {
            var option = {
                x: i,
                y: j,
                radius: 6,
                color: '#fff'
            }
            var newBubble = new Bubble(option)
            newBubble.draw(newCtx)
        } 
    }
}

The effect is as shown in the picture

More cool CSS3, html5, javascript special effects codes, all in: js special effects collection

[Related recommendations]

How to use css3 to achieve automatic carousel effects of images (complete code attached)

css3 color linear gradient attribute: smooth transition between several colors (complete code attached)

The above is the detailed content of How to use HTML5+css3 to achieve particle effect text animation special effects (complete code attached). For more information, please follow other related articles on the PHP Chinese website!