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

这篇文章发布于 2018年05月31日,星期四,00:09,归类于 JS实例。 阅读 10499 次, 今日 40 次 16 条评论

 

一、文字动画效果预览

点击本页面任意位置即可!因为动画效果用的是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对象中有个pageXpageY可以获取到点击事件发生时候事件发生源相对于页面左上角的水平距离和垂直距离。对于鼠标点击事件,则对应鼠标相对于页面左上角的距离,因此,我们只要把文字内容定位到这个点击位置偏上一点位置就可以了。

然后,配合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

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

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

(本篇完)

分享到:1
×


发表评论(目前16 条评论)

  1. 土豆啊说道:

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

    请教一下,这个地方动画结束之后删除自己的功能
    我用以下方式写,鼠标快速点击为什么会有重影吖,求大神解惑
    $(“.myDiv”).on(‘animationend’,function(){
    $(this).remove();
    })

  2. 刘伟波说道:

    不错,要收藏了

  3. 郭二蛋说道:

    看了旭叔的最后一句话,真心觉得旭叔是一个有胸怀的人,这篇文章对于我这样刚入门的小朋友来说真的很有价值,谢谢旭叔!

  4. 啊哈哈说道:

    请问一下,如何处理本页面在失去焦点的时候,animation动画停在最后一刻,就是说切换到别的页面,再回到当前页面,会发现之前的动画还没执行完。。

  5. T ll说道:

    if (arr[index]) {
    eleText.innerHTML = arr[index];
    } else {
    index = 0;
    eleText.innerHTML = arr[0];
    }
    index++;
    感觉这样更好点
    if(!arr[index]){
    index = 0;
    }
    ele.innerText = arr[index];
    index++;

  6. 厉害的张老师说道:

    蔡徐坤是真的皮

  7. roberthuang说道:

    老师最后一句的总结很赞!

  8. yuehao说道:

    如果我能达到老师一半半的水平,都不会说出技术发展太快的话了,还是自己没花时间啊。
    老师的很多研究都是超前的,还是一超就超几年。

  9. 张老师粉丝说道:

    张老师棒棒滴。

  10. 允安说道:

    萌新,学习到了-。-
    font-size可以在自家站上调整下弹出的字体大小

  11. 迷路的麋鹿丶丶丶说道:

    是知识就有用,对个人价值大小有差异而已 (づ。◕‿‿◕。)づ

  12. ggB说道:

    顺手一改,加了小心心,页面送给喜欢的男孩子 ^-^

  13. hktkdy说道:

    学习了。
    可以看出来,最后比拼的还是css,js基础。

  14. xc说道:

    又红又专的感觉2333