点击页面出现富强民主这类文字动画效果

Posted 2020-12-03 dalulu

一、文字动画效果预览

点击本页面任意位置即可！因为动画效果用的是CSS3 animation，因此，IE9及其以下浏览器无效果。

 

二、如何在自己网站上添加类似效果？

1. 复制并粘贴下面的内联CSS代码到页面任意位置

<style>
.text-popup {
    animation: textPopup 1s;
    color: red;
    user-select: none;
    white-space: nowrap;
    position: absolute;
    z-index: 99;
}
@keyframes textPopup {
    0%, 100% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);    
    }
}
</style>

 

2. 复制下面的内联JS代码到页面任意位置

<script>
var fnTextPopup = function (arr, options) {
    // arr参数是必须的
    if (!arr || !arr.length) {
        return;    
    }
    // 主逻辑
    var index = 0;
    document.documentElement.addEventListener(‘click‘, function (event) {
        var x = event.pageX, y = event.pageY;
        var eleText = document.createElement(‘span‘);
        eleText.className = ‘text-popup‘;
        this.appendChild(eleText);
        if (arr[index]) {
            eleText.innerhtml = arr[index];
        } else {
            index = 0;
            eleText.innerHTML = arr[0];
        }
        // 动画结束后删除自己
        eleText.addEventListener(‘animationend‘, function () {
            eleText.parentNode.removeChild(eleText);
        });
        // 位置
        eleText.style.left = (x - eleText.clientWidth / 2) + ‘px‘;
        eleText.style.top = (y - eleText.clientHeight) + ‘px‘;
        // index递增
        index++;
    });    
};

fnTextPopup([‘富强‘, ‘民主‘, ‘文明‘, ‘和谐‘, ‘自由‘, ‘平等‘, ‘公正‘, ‘法治‘, ‘爱国‘, ‘敬业‘, ‘诚信‘, ‘友善‘]);
</script>

 

就有效果了！

当然，你也可以把CSS和JS代码片段分别内嵌到自己的CSS文件和JS文件中。

三、点击页面出现文字动画效果实现原理

DOM时间的event对象中有个pageX和pageY可以获取到点击事件发生时候事件发生源相对于页面左上角的水平距离和垂直距离。对于鼠标点击事件，则对应鼠标相对于页面左上角的距离，因此，我们只要把文字内容定位到这个点击位置偏上一点位置就可以了。

然后，配合CSS3 animation，写一个往上淡出效果就可以了。

当文字元素插入到页面的时候，动画会自动执行。

为了防止文字元素不断创建，占用不必要的资源，我们可以借助animationend事件实现动画结束的时候自动删除创建的文字元素。

ele.addEventListener(‘animationend‘, function () {
    ele.parentNode.removeChild(ele);
});

 

四、语法和参数

语法如下：

fnTextPopup(arr);

其中，arr表示依次要显示的文字内容数组。

例如，我们希望点击页面显示的不是核心社会主义价值观，而是想为自己喜欢偶像加油，可以这样：

fnTextPopup([‘蔡徐坤我爱你‘, ‘范丞丞你最棒‘, ‘请pick杨超越‘, ‘王菊加油‘, ‘吴宣仪你最美‘]);

如果想要修改tips文字的颜色，字体等样式效果，修改CSS代码中.text-popup类名对应的CSS属性即可！

五、结束语

如果想要加入IE8浏览器，可以按照上面实现逻辑，改成jQuery的语法，然后，动画可以使用jQuery的animate()方法，这里不展示。

另外，移动端没测试，如果没效果，试试document.documentElement改成document.body。

本文几乎没有深度，但是，有价值，一些代码刚入门的小朋友就需要这些东西，节约了别人的时间，帮助了别人实现功能，是件有价值的事情，因此，值得花时间记录下来。而且，以后，说不定自己也要用到这个效果，也可以节约自己的时间，一举两得。

写作这事吧，也随缘，别总想着帮到所有人，没必要那么功利，只要不误人，有价值，我觉得都是值得鼓励的。