I have a problem in achieving the effect of this page: link
The typewriter effect I already got with someone's help, but the problem that came up now is that I can not think of how to do the white shading effect that appears every time before changing the word.
I'm working with Angular and Bootstrap, I had an idea in doing so by applying 2 classes with the help of Angular's ngClass directive and the property step, so far what I could do is a shading from left to right when writing the word, but what I want to do is something identical to the page, that when you finish writing a word, you shade from right to left, you erase and you write a new word.
Below I leave the codes of what I have achieved so far:
import { Component, OnInit,OnDestroy,OnChanges } from '@angular/core';
@Component({
selector: 'app-body',
templateUrl: './body.component.html',
styleUrls: ['./body.component.css']
})
export class BodyComponent implements OnInit, OnChanges, OnDestroy {
bandera = true;
textToShow= "Bienvenido";
currentText = '';
interval: any;
nombre ="Julián Pinto";
band = true;
constructor() { }
ngOnInit() {
this.currentText = '';
if (this.bandera) {
this.interval = setInterval(() => {
this.currentText += this.textToShow.charAt(this.currentText.length);
if (this.currentText.length === this.textToShow.length) {
setTimeout(()=>this.currentText='',250);
}
}, 300);
}
}
ngOnChanges() {
}
ngOnDestroy() {
clearInterval(this.interval);
}
}*{
margin: 0;
padding: 0;
}
#contenedor-padre{
height: 100vh;
width: 100vw;
z-index: 10;
background-color: orange;
}
#maquina{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 2rem;
color: aquamarine;
}
#fila{
width: 100%;
height: 70px;
background-color: darkblue;
border-style: dotted;
}
.sombreado-transparente{
background-color: transparent;
}
.sombreado-color{
background-color: orange;
}<div class="d-flex align-items-center" id="contenedor-padre">
<div class="row" id="fila">
<div class="col-md-12">
<p class="text-center">{{nombre}}</p>
</div>
<div class="col-md-12">
<p class="text-center" id="maquina"><span [ngClass]="{'sombreado-transparente': band, 'sombreado-color': !band}"> {{currentText}} </span> </p>
</div>
</div>
</div>