如何使用动漫 js 创建带有打字机效果的文字动画?
How to create text animation with typewritter effects using anime js?
您好,我正在尝试使用 anime js, now I would like to create text animation with Typewriter Effect using anime.js, like this one here demo live 创建不同的动画。
这是我目前的情况。
HTML:
<div class="text-animation">
Welcome to codingflag
</div>
css:
body {
margin:0px;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#222;
}
.text-animation {
color:#f5f5f5;
font-size:50px;
font-family:"Passion One",sans-serif;
letter-spacing:1px;
}
.text-animation .letter {
display:inline-block;
}
这是js.
var element = document.getElementsByClassName("text-animation")[0];
element.innerHTML = element.textContent.replace(/\S/g,'<span class="letter">$&</span>');
anime.timeline({loop:true})
.add({
targets:'.text-animation .letter',
scale:[3,1],
opacity:[0,1],
translateZ:0,
duration:1000,
easing:"easeOutExpo",
delay:(elem, index) => index*70
})
.add({
targets:'.text-animation',
opacity:0,
duration:1000,
delay:1000,
easing:"easeOutExpo"
})
这是我的代码: type writer effect.
根据我上面提供的示例,我需要添加什么才能获得我想要的结果。?
这个打字动画最难的部分是光标的偏移量计算,可以通过对单词的每个字母使用 HTMLElement.offsetLeft and HTMLElement.offsetWidth 的组合轻松完成。
const element = document.querySelector('.text-animation');
const lettersHtml = element.textContent.replace(/\S/g, '<span class="letter">$&</span>');
element.innerHTML = `<div class="letters">${lettersHtml}</div><span class="cursor"></span>`;
element.style.display = 'block';
const letters = Array.from(element.querySelectorAll('.letter'));
const TYPE_AFTER_MS = 3_000;
const JUMP_AFTER_MS = 250;
const blink = anime({
targets: '.text-animation .cursor',
loop: true,
duration: 750,
opacity: [
{value: [1, 1]},
{value: [0, 0]}
],
});
anime.timeline({loop: true})
.add({
targets: '.text-animation .cursor',
translateX: letters.map((letter, i) =>
({value: letter.offsetLeft + letter.offsetWidth, duration: 1, delay: i === 0 ? 0 : JUMP_AFTER_MS}))
}, TYPE_AFTER_MS)
.add({
targets: '.text-animation .letter',
opacity: [0, 1],
duration: 1,
delay: anime.stagger(JUMP_AFTER_MS),
changeBegin: () => {
blink.reset();
blink.pause();
},
changeComplete: () => {
blink.restart();
}
}, TYPE_AFTER_MS)
.add({
targets: '.text-animation',
opacity: 0,
duration: 1000,
delay: 500,
easing: 'easeOutExpo',
});
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #222;
}
.text-animation {
display: none;
position: relative;
color: #f5f5f5;
font-size: 50px;
font-family: "Passion One", sans-serif;
letter-spacing: 1px;
line-height: 1;
}
.text-animation .letter {
display: inline-block;
opacity: 0;
}
.cursor {
position: absolute;
top: 0;
bottom: 0;
width: 3px;
background: #f5f5f5;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<div class="text-animation">
Welcome to codingflag
</div>
我推荐你使用Typed.js..because it's very easy to use...Here is an example made with Typed.js...
这是我的例子...
var typed = new Typed('#text', {
strings: ["First String..!","Second String..!","Third String..!","Third Word..!"],
typeSpeed: 120,
backSpeed: 80,
loop: true
});
body{
padding:0;
margin:0;
box-sizing:border-box;
}
.container{
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
width:100vw;
height:100vh;
display: flex;
align-items: center;
justify-content: center;
}
h2{
text-align:center;
color:white;
}
<!--Typed.js CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.5/typed.min.js"></script>
<!--Body-->
<div class="container">
<h2 id="text"></h2>
</div>
您好,我正在尝试使用 anime js, now I would like to create text animation with Typewriter Effect using anime.js, like this one here demo live 创建不同的动画。
这是我目前的情况。
HTML:
<div class="text-animation">
Welcome to codingflag
</div>
css:
body {
margin:0px;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#222;
}
.text-animation {
color:#f5f5f5;
font-size:50px;
font-family:"Passion One",sans-serif;
letter-spacing:1px;
}
.text-animation .letter {
display:inline-block;
}
这是js.
var element = document.getElementsByClassName("text-animation")[0];
element.innerHTML = element.textContent.replace(/\S/g,'<span class="letter">$&</span>');
anime.timeline({loop:true})
.add({
targets:'.text-animation .letter',
scale:[3,1],
opacity:[0,1],
translateZ:0,
duration:1000,
easing:"easeOutExpo",
delay:(elem, index) => index*70
})
.add({
targets:'.text-animation',
opacity:0,
duration:1000,
delay:1000,
easing:"easeOutExpo"
})
这是我的代码: type writer effect.
根据我上面提供的示例,我需要添加什么才能获得我想要的结果。?
这个打字动画最难的部分是光标的偏移量计算,可以通过对单词的每个字母使用 HTMLElement.offsetLeft and HTMLElement.offsetWidth 的组合轻松完成。
const element = document.querySelector('.text-animation');
const lettersHtml = element.textContent.replace(/\S/g, '<span class="letter">$&</span>');
element.innerHTML = `<div class="letters">${lettersHtml}</div><span class="cursor"></span>`;
element.style.display = 'block';
const letters = Array.from(element.querySelectorAll('.letter'));
const TYPE_AFTER_MS = 3_000;
const JUMP_AFTER_MS = 250;
const blink = anime({
targets: '.text-animation .cursor',
loop: true,
duration: 750,
opacity: [
{value: [1, 1]},
{value: [0, 0]}
],
});
anime.timeline({loop: true})
.add({
targets: '.text-animation .cursor',
translateX: letters.map((letter, i) =>
({value: letter.offsetLeft + letter.offsetWidth, duration: 1, delay: i === 0 ? 0 : JUMP_AFTER_MS}))
}, TYPE_AFTER_MS)
.add({
targets: '.text-animation .letter',
opacity: [0, 1],
duration: 1,
delay: anime.stagger(JUMP_AFTER_MS),
changeBegin: () => {
blink.reset();
blink.pause();
},
changeComplete: () => {
blink.restart();
}
}, TYPE_AFTER_MS)
.add({
targets: '.text-animation',
opacity: 0,
duration: 1000,
delay: 500,
easing: 'easeOutExpo',
});
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #222;
}
.text-animation {
display: none;
position: relative;
color: #f5f5f5;
font-size: 50px;
font-family: "Passion One", sans-serif;
letter-spacing: 1px;
line-height: 1;
}
.text-animation .letter {
display: inline-block;
opacity: 0;
}
.cursor {
position: absolute;
top: 0;
bottom: 0;
width: 3px;
background: #f5f5f5;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<div class="text-animation">
Welcome to codingflag
</div>
我推荐你使用Typed.js..because it's very easy to use...Here is an example made with Typed.js...
这是我的例子...
var typed = new Typed('#text', {
strings: ["First String..!","Second String..!","Third String..!","Third Word..!"],
typeSpeed: 120,
backSpeed: 80,
loop: true
});
body{
padding:0;
margin:0;
box-sizing:border-box;
}
.container{
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
width:100vw;
height:100vh;
display: flex;
align-items: center;
justify-content: center;
}
h2{
text-align:center;
color:white;
}
<!--Typed.js CDN-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.5/typed.min.js"></script>
<!--Body-->
<div class="container">
<h2 id="text"></h2>
</div>