Web实现在鼠标或点击处的文字特效

I’m Shendi

---

效果展示

进入以下链接直接体验
https://sdpro.top/html/main.html

视频展示

js在鼠标点击后弹出文字特效演示

实现思路

给document增加点击事件，点击时在点击位置生成文字并使用js延时来制作动画效果

效果实现

首先生成的为文本，所以需要准备一个文本标签（当然也可以用图片标签等…）

元素样式

生成的文本在鼠标点击处，所以一般position为absolute或者fixed，absolute会影响页面，这里使用fixed

元素在其他元素上面，z-index需要给一个较大值
文本不需要换行，也不需要选中，于是css如下（也可以用js设置）

.effect_ele {
    position: fixed;
    z-index: 9999;
    font-size: 14px;
    white-space: nowrap;
    /* 让元素不能被选中 */
    -webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

点击事件

所有元素都能触发这个特效，所以直接给document增加点击事件

document.documentElement.addEventListener('click', function (event) {
});

获取位置

在点击事件中的 event 参数包含了点击位置信息，因为使用的 fixed，所以使用 clientX，clientY拿到位置，默认生成的位置应该在点击位置的上面一点，所以 y 默认减去一定的像素

var x = event.clientX, y = event.clientY - 10;

创建元素

特效效果为点击出现文字后文字慢慢消失并往左上/右上移动
而且元素的文字颜色/文字随机变化，于是先创建随机

// 文字列表
var texts = "Test,Shendi,Element,Javascript".split(",");
// 随机文字
var text = texts[Math.floor(Math.random()*100) % texts.length];
// 随机颜色 rgb
var r = Math.floor(Math.random()*255),g = Math.floor(Math.random()*255),b = Math.floor(Math.random()*255);

元素创建使用 document.createElement("标签名");，这里就用span标签就可以了

var ele = document.createElement("span");

文字消失需要使用到透明度（opacity），需要在js里给元素设置透明度为1 (0代表完全透明)

// 只能在js设置,在css里设置后面拿到为 undefined
ele.style.opacity = 1;

将元素初始化，为了美观一点，可以加上文字阴影

// 元素的 class 名称,指定元素样式
ele.className = "effect_ele";
// 元素默认位置
ele.style.left = x + "px";
ele.style.top = y + "px";
// 文字颜色，文字阴影
ele.style.color = "rgb(" +r+ "," +g+ "," +b+ ")";
ele.style.textShadow = "5px 3px 1px rgba(" +r+ "," +g+ "," +b+ ",0.4)";
//  元素内容
ele.innerText = text;

将元素加入document

创建完元素后需要将元素加入文档才能显示，使用 appendChild 函数，函数返回添加后的元素引用

在点击事件中直接使用 this.appendChild

// 这里的元素实例需要保存,后面需要改变元素位置等
var eleInst = this.appendChild(ele);

元素移动消失效果

往上移动，左右则随机，每次移动都减少一点透明度，透明度减完则删除元素，因需要递归，所以封装了一个函数，代码如下

// 参数1为创建的元素引用，参数4为方向
function textAnim(ele, x, y, direction) {
    // 往上移动，并减少opacity,直至opacity<=0则移除
    setTimeout(function () {
        if (ele.style.opacity <= 0) {
            document.documentElement.removeChild(ele);
            return;
        }
        y -= 1.2;
        if (direction == 0) {
            x += 1;
        } else {
            x -= 1;
        }
        ele.style.top = y + "px";
        ele.style.left = x + "px";
        ele.style.opacity = ele.style.opacity - 0.02;
        textAnim(ele, x, y, direction);
    }, 11);
}

最终代码

最终代码如下

/**
 * 实际使用为了避免意外，用 try catch 盖住
 * @author Shendi
 */
try {
    var texts = "Test,Shendi,Element,Javascript".split(",");
    document.documentElement.addEventListener('click', function (event) {
        var x = event.clientX, y = event.clientY - 10;
        var ele = document.createElement("span");
        ele.className = "effect_ele";
        ele.style.left = x + "px";
        ele.style.top = y + "px";
        // 只能在这设置,在css里就拿不到了
        ele.style.opacity = 1;

        var r = Math.floor(Math.random()*255),g = Math.floor(Math.random()*255),b = Math.floor(Math.random()*255);
        ele.style.color = "rgb(" +r+ "," +g+ "," +b+ ")";
        ele.style.textShadow = "5px 3px 1px rgba(" +r+ "," +g+ "," +b+ ",0.4)";
        ele.innerText = texts[Math.floor(Math.random()*100) % texts.length];

        textAnim(this.appendChild(ele), x, y, Math.floor(Math.random()*10)%2);
    });

	/* direction 1左 0右 */
    function textAnim(ele, x, y, direction) {
        // 往上移动，并减少opacity,直至opacity<=0则移除
        setTimeout(function () {
            if (ele.style.opacity <= 0) {
                document.documentElement.removeChild(ele);
                return;
            }
            y -= 1.2;
            if (direction == 0) {
                x += 1;
            } else {
                x -= 1;
            }
            ele.style.top = y + "px";
            ele.style.left = x + "px";
            ele.style.opacity = ele.style.opacity - 0.02;
            textAnim(ele, x, y, direction);
        }, 11);
    }
} catch (e) {
    console.log(e);
}

一键三连嘛？