animate-text
Version:
188 lines (178 loc) • 4.76 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>文本动画DEMO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" src="../dist/animate-text.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.app-root {
width: 100%;
max-width: 560px;
margin: 0 auto;
height: 100%;
padding: 20px;
box-sizing: border-box;
background: #fff;
overflow: auto;
}
.app-root {
width: 100%;
}
.header {
width: 100%;
text-align: center;
margin-bottom: 50px;
font-size: 14px;
color: #999;
}
.header h1 {
color: #333;
font-size: 20px;
}
.part {
float: left;
width: 100%;
max-width: 500px;
margin-bottom: 30px;
margin-right: 3000px;
}
.demo {
width: 100%;
max-width: 400px;
float: left;
color: #666;
height: 120px;
}
.demo2 {
height: 60px;
}
.demo3 {
font-size: 30px;
}
.play-btn {
float: right;
padding: 3px 6px;
border: 1px solid green;
border-radius: 3px;
font-size: 14px;
color: green;
cursor: pointer;
background: #fff;
}
.animate-text-text-span {
display: inline-block;
animation: text-enter-top 0.2s;
transform-origin: 200% center;
}
.animate-text-text-span:nth-child(2n) {
animation: text-enter-bottom 0.2s;
}
@keyframes text-enter-top {
from {
color: blue;
opacity: 0;
transform: rotate(25deg);
}
to {
color: red;
opacity: 1;
transform: rotate(0deg);
}
}
@keyframes text-enter-bottom {
from {
color: red;
opacity: 0;
transform: rotate(-25deg);
}
to {
color: blue;
opacity: 1;
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div class="app-root">
<header class="header">
<h1>animate-text 文字动画</h1>
<div class="addr">
<span>说明文档: </span><a id="addr" href="">https://github.com/qgh810/animate-text</a>
</div>
</header>
<div class="part">
<div class="demo">
<span class="string">
动画文字<br>
可以自定义动画时长,<br>
会保留原有文字样式, <br>
配合文字左右对齐方式等样式会有不一样的效果!
</span>
</div>
<div class="play-btn" id="btn1">
重新播放
</div>
</div>
<div class="part">
<div class="demo demo2">
<span class="number">66666.666</span>
</div>
<div class="play-btn" id="btn2">
重新播放
</div>
</div>
<div class="part">
<div class="demo demo3">
<span class="string">文字出现动画效果自定义</span>
</div>
<div class="play-btn" id="btn3">
重新播放
</div>
</div>
</div>
</body>
<script>
window.onload = function () {
var animateText = new AnimateText('.app-root .string', 1200)
var animateNumber = new AnimateText('.app-root .number', {
time: 1000,
isNumber: true,
startNumber: 0,
changeCount: 32,
onAnimated: function () {console.log('数字动画结束')}
})
var animateText2 = new AnimateText('.app-root .demo3 .string', {
time: 1000,
spanClassName: 'animate-text-text-span',
onAnimated: function () {console.log('动画结束')}
})
var btn1 = document.getElementById('btn1')
btn1.addEventListener('click', function () {
animateText.play()
}, false)
var btn2 = document.getElementById('btn2')
btn2.addEventListener('click', function () {
animateNumber.play()
}, false)
var btn3 = document.getElementById('btn3')
btn3.addEventListener('click', function () {
animateText2.play()
}, false)
var addrBtn = document.getElementById('addr')
addrBtn.addEventListener('click', function (e) {
e.preventDefault()
window.open('https://github.com/qgh810/animate-text')
}, false)
}
</script>
</html>