1

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);  

    }
1
  • Se me ocurre que establezcas una variable global de tipo boolean, que te indique si ya has ejecutado la animación. Luego, al hacer scroll, verificas el valor de esa variable, si la misma es false entonces ejecutas la animación y estableces la variable a true. Saludos. Commented el 2 jul. 2021 a las 12:44

1 respuesta 1

1

Puedes usar un atributo de datos para marcar cuando ya se aplicó la animación a un objeto y evitar repetirlo.

El método .data() es el que usas en jQuery para consultar o establecer atributos de datos:

$(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;

        // ¿Ya se realizó la animación?
        if(objeto.data('animated')) {
            // No volver a animar
            return;
        }

        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(' ');
            }
        });
        // Evitar que vuelva a ejecutarse la animación
        objeto.data('animated', true);

        var escribir = setInterval(function(){
            escribiendo += palabras[cont];
            objeto.html(escribiendo);
            cont++;     
            if(cont === palabras.length){
                clearInterval(escribir);
            }       
        }, tiempo);  

    }
/* Solo para poder probar */
.titulo { margin-top: 750px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

1
  • Muchas gracias estimado, era lo que estaba buscando y no sabia como hacerlo, una cosa mas aprendida el día de hoy Commented el 2 jul. 2021 a las 17:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.