点击页面弹出文字动画效果

introduce

在博客园查询资料的时候，经常会有一些小的惊喜，比如点击页面，会弹出一些文字，向上浮动，然后消失，显得无聊，我就做了一个demo

tool

首推vscode，带上插件真的是飞一般的感觉
chrome，浏览器自带的审查元素是我见过最棒的。
js原生函数以及css3动画函数

thought

在页面绑定函数，点击页面触发函数。
取得当前点击的位置，采用event.page取得（取得的是文档的左边缘和上边缘）
把所有想在页面展示的字符串放到数组里。判断当前索引的是否为空。不为空就在页面创建一个元素，内容为字符串，设置位置为鼠标点击的位置。为空则索引归零。每次点击成功后索引+1；

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./index.css"><link rel="stylesheet" href="./animote.css"><title>text-animation</title>
</head><body class="body"><div class="center"><p>你的眼中有万千星辰</p><p>左眼一千</p><p>右眼一万</p></div><script src="./index.js"></script>
</body></html>

index.css

*{padding: 0;margin: 0;
}
.body {width: 100%;height: 100%;/* text-align: center; *//* align-items: center;justify-content: center;display: flex */
}
.center {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center
}

animote.css

.text_popup{animation :textPopUp 1s;color: blue;user-select: none;white-space: nowrap;position: absolute;z-index: 999;
}
@keyframes textPopUp {0%, 100% {opacity: 0;}10% {opacity: 1;}100% {transform: translateY(-50px);}
}

index.js

var showText = function(arr, option) {if (!arr || arr.length == 0) {return ;}var index = 0;document.documentElement.addEventListener("click", function(event) {var x = event.pageX;console.log(x)var y = event.pageY;var text = document.createElement("span");text.setAttribute("class", 'text_popup');this.appendChild(text);if (arr[index]) {text.innerHTML = arr[index];} else {index = 0;text.innerHTML = arr[index];}text.addEventListener("animationend", function() {text.parentNode.removeChild(text);})text.style.left = (x - text.clientWidth / 2) + "px";text.style.top = (y - text.clientHeight / 2) + "px";index ++ })
}showText(['行也欢喜','停也欢喜','眉目带笑','醉如春风','浮生如梦','岁月如舟'])

writer&contact

Jontyy jontyy@163.com

github

https://github.com/YJD199798/jontyy-textanimation.git

点击页面弹出文字动画效果相关推荐

Android高效率实现弹出带动画效果的对话框，仿照微信对话框效果
转载请注明出处: http://blog.csdn.net/jakeyangchina/article/details/53423453 看到很多app页面里都有弹出对话框效果,今天使用PopupWi ...
Js实现点击超链接弹出层，效果仿Discuz登录！
主要应用到的是dispaly:none 和 dispaly:block;来控制实现的: <a id="link" href="#" onclick=&qu ...
[QT]实现点击按钮弹出图片的效果
点击按钮弹出图片的实现 void MainWindow::btnTest() {QLabel* labelImage = new QLabel(this, Qt::Dialog |Qt::Window ...
点击输入框弹出文字html,jQuery实现点击文本框弹出热门标签的提示效果
jQuery实现点击文本框弹出热门标签的提示示例_网页代码站 body { font-size:12px;font-family:Arial; } #m_tagsItem { background:# ...
vue中怎样实现弹出层动画效果？由上而下渐渐显示---封装成复用组件
子组件: <template><div class="home"><!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --& ...
vue中怎样实现弹出层动画效果？由上而下渐渐显示
1 <template><div class="home"> ...
php点击弹出文字代码,js实现鼠标点击页面弹出自定义文字效果
本文实例为大家分享了js鼠标点击页面弹出文字的具体代码,供大家参考,具体内容如下效果: 实现代码: (function(e){ // 点击事件触发生生元素等一系列动作的初始状态 var bombFl ...
点击页面出现富强、民主这类文字动画效果
一.文字动画效果预览点击本页面任意位置即可!因为动画效果用的是CSS3 animation,因此,IE9及其以下浏览器无效果. 二.如何在自己网站上添加类似效果? 复制并粘贴下面的内联CSS代码到页 ...
html点击图片弹出模态框,JS实现图片点击后出现模态框效果
JS实现图片点击后出现模态框效果 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了JS实现图片点击后出现模态框效果,编程之家小编觉得挺不错的 ...

点击页面弹出文字动画效果

点击页面弹出文字动画效果

introduce

tool

thought

index.html

index.css

animote.css

index.js

writer&contact

github

点击页面弹出文字动画效果相关推荐

最新文章

热门文章