1
0
pines/elements/typing-effect.html

71 lines
2.4 KiB
HTML
Raw Permalink Normal View History

2023-05-24 05:29:02 -07:00
<div
x-data="{
text: '',
textArray : ['Alpine JS is Amazing', 'It is Truly Awesome!', 'You Have to Try It!'],
textIndex: 0,
charIndex: 0,
typeSpeed: 110,
2023-05-24 05:29:02 -07:00
cursorSpeed: 550,
pauseEnd: 1500,
2023-05-24 05:29:02 -07:00
pauseStart: 20,
direction: 'forward',
}"
x-init="$nextTick(() => {
let typingInterval = setInterval(startTyping, $data.typeSpeed);
function startTyping(){
let current = $data.textArray[ $data.textIndex ];
// check to see if we hit the end of the string
if($data.charIndex > current.length){
$data.direction = 'backward';
clearInterval(typingInterval);
setTimeout(function(){
typingInterval = setInterval(startTyping, $data.typeSpeed);
}, $data.pauseEnd);
}
$data.text = current.substring(0, $data.charIndex);
if($data.direction == 'forward')
{
$data.charIndex += 1;
}
else
{
if($data.charIndex == 0)
{
$data.direction = 'forward';
clearInterval(typingInterval);
setTimeout(function(){
$data.textIndex += 1;
if($data.textIndex >= $data.textArray.length)
{
$data.textIndex = 0;
}
typingInterval = setInterval(startTyping, $data.typeSpeed);
}, $data.pauseStart);
}
$data.charIndex -= 1;
}
}
setInterval(function(){
if($refs.cursor.classList.contains('hidden'))
{
$refs.cursor.classList.remove('hidden');
}
else
{
$refs.cursor.classList.add('hidden');
}
}, $data.cursorSpeed);
})"
class="flex items-center justify-center mx-auto text-center max-w-7xl">
<div class="relative flex items-center justify-center h-auto">
<p class="text-2xl font-black leading-tight" x-text="text"></p>
<span class="absolute right-0 w-2 -mr-2 bg-black h-3/4" x-ref="cursor"></span>
</div>
</div>