Cara Membuat Typing Animation
Cara membuat typing animation di vue 3. Typing animation biasanya untuk tampilan halaman yang mempunyai kata yang banyak dan dibuat lebih ringkas.
Membuat halaman Template
app.vue
<template>
<div class="container">
<h1>
Hi, I'm a
<span class="typed-text">{{ typeValue }}</span>
<span class="blinking-cursor">|</span>
<span class="cursor" :class="{ typing: typeStatus }"> </span>
</h1>
</div>
</template>
Setelah itu buat css nya.
app.vue
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-size: 6rem;
font-weight: normal;
span.typed-text {
color: #d2b94b;
}
}
// Cursor blinking CSS Starts...
.blinking-cursor {
font-size: 6rem;
color: #2c3e50;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
@keyframes blink {
from,
to {
color: transparent;
}
50% {
color: #2c3e50;
}
}
@-moz-keyframes blink {
from,
to {
color: transparent;
}
50% {
color: #2c3e50;
}
}
@-webkit-keyframes blink {
from,
to {
color: transparent;
}
50% {
color: #2c3e50;
}
}
@-ms-keyframes blink {
from,
to {
color: transparent;
}
50% {
color: #2c3e50;
}
}
@-o-keyframes blink {
from,
to {
color: transparent;
}
50% {
color: #2c3e50;
}
}
// Cursor blinking CSS Ends...
</style>
Jika sudah buat script codenya
app.vue
const typeValue = ref('')
const displayTextArray = ref([
'YouTuber',
'Developer',
'Blogger',
'Designer',
'Freelancer',
])
const displayTextArrayIndex = ref(0)
const charIndex = ref(0)
const typeStatus = ref(false)
const newTextDelay = ref(2000)
const erasingSpeed = ref(100)
const typingSpeed = 100
function typeText() {
if (
charIndex.value < displayTextArray.value[displayTextArrayIndex.value].length
) {
if (!typeStatus.value) typeStatus.value = true
typeValue.value += displayTextArray.value[
displayTextArrayIndex.value
].charAt(charIndex.value)
charIndex.value += 1
setTimeout(typeTextTitle, typingSpeed)
} else {
this.typeStatus = false
setTimeout(eraseText(), newTextDelay.value)
}
}
function eraseText() {
if (charIndex.value > 0) {
if (!typeStatus.value) typeStatus.value = true
typeValue.value = displayTextArray.value[
displayTextArrayIndex.value
].substring(0, charIndex.value - 1)
charIndex.value -= 1
setTimeout(eraseText(), erasingSpeed.value)
} else {
typeStatus.value = false
displayTextArrayIndex.value += 1
if (displayTextArrayIndex.value >= displayTextArray.value.length)
displayTextArrayIndex.value = 0
setTimeout(typeText(), typingSpeed.value + 1000)
}
}
Sekian dan terima kasih.