Estimados espero se encuentren bien, tengo el siguiente inconveniente.
Estoy implementando el mostrar contenido de forma dinámica con animaciones, dichas animaciones se ejecutan cuando hago scroll en la pagina al llegar a determinada altura del contenedor. Las animaciones funcionan perfectamente ya que solo se ejecutan 1 vez cuando se carga la pagina por primera vez o cuando esta se recarga.
Todo bien hasta ahí, el problema es que tengo una función en JavaScript que realiza una animación tipo maquina de escribir, el problema es que se ejecuta cada vez que hago scroll y no como las demás que solo se ejecutan una sola vez.
Como puedo evitar que dicha función se repita ?
Contenido HTML
<div class="container valores-home text-center p-xl-5 p-lg-5 p-md-3 p-sm-3 p-3">
<div class="row justify-content-center overflow-hidden">
<div class="col-lg-12 col-md-11 col-sm-12 pb-2">
<p class="jura f-16 m-0 ante-titulo">Nuestros Valores</p>
<h1 class="titulo">¿QUÉ NOS HACE DIFERENTES?</h1>
<hr class="line-1">
<hr class="line-2">
<p class="parrafo descripcion mb-2 parrafo-valores">En <strong>Iliusterra</strong> nuestros clientes reciben un servicio de calidad y a la vanguardia en las <strong>Energías Sustentables</strong></p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-6 text-center valores">
<span class="iconhome icon-compromiso"></span>
<h5 class="text-primary m-0">VALOR 1</h5>
<hr class="line-3">
<p class="parrafo pb-4">Descripcion 1</p>
</div>
</div>
</div>
Animar Objetos
$(window).on('scroll', function(){
animar_valores();
});
function animar_valores(){
let altura = $('.valores-home').offset().top;
let scrollTop = document.documentElement.scrollTop;
let valores = document.querySelectorAll('.valores');
for(var i = 0; i < valores.length; i++){
if(altura - 750 < scrollTop){
valores[i].classList.add("active");
$('.valores-home').css('opacity','1')
$('.valores-home .titulo').addClass('active');
$('.valores-home .ante-titulo').addClass('active');
$('.valores-home .line-2').addClass('active');
$('.valores-home .line-1').addClass('active');
maquina_escribir(30 , $('.parrafo-valores'));
exit();
}
}
}
function maquina_escribir(tiempo, objeto){
var palabras = [];
var escribiendo = '';
var cont = 0;
objeto[0].childNodes.forEach(function(node) {
if(node.nodeName === '#text'){
palabras.push.apply(palabras, node.textContent.trim().split(''));
palabras.push(' ');
}else{
palabras.push('<strong>');
palabras.push.apply(palabras, node.textContent.trim().split(''));
palabras.push('</strong>');
palabras.push(' ');
}
});
var escribir = setInterval(function(){
escribiendo += palabras[cont];
objeto.html(escribiendo);
cont++;
if(cont === palabras.length){
clearInterval(escribir);
}
}, tiempo);
}
false
entonces ejecutas la animación y estableces la variable atrue
. Saludos.