2

En la siguiente plantilla de demostración el texto se escribe y, luego se borra y, se vuelve a escribir con su respectivo efecto de cursor de escritura.

Logrando obtener el siguiente efecto usando solo jQuery:

$(document).ready(function(){
	var msg = 'Mensaje de prueba...';
	var k = 0;
	var char = 0;
	var output = $('#page-two');

	var app = {
		init: function(text, target){
			target.html('');
			char = text.length;
			this.sayHello(text, target);
		},
		sayHello: function(text, target){
			target.append(text[k]);
			console.log(k);
			if(k < char){
				var that = this;
				k++;
				var timer = setTimeout(function(){
					that.sayHello(text, target);
				}, 80);
			}
		}
	};
	app.init(msg, output);
});
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

*{
	margin: 0;
	padding: 0;
	boz-sizing: border-box;
	font-family: "Open Sans", sans-serif
}
body{
	background: linear-gradient(135deg,#00C4FF,#9D1BB2);
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<section id="container">
		<div id="page-two"></div>
		<div class="clear"></div>
	</section>

¿Como puedo hacer para que tenga el efecto de borrar y, volver a escribir con el respectivo cursor de escritura al igual que la plantilla de demostración?

2 respuestas 2

1

el css del cursos lo saque de la misma web de tu ejemplo:

   $(document).ready(function(){

        var msg = 'Mensaje de prueba...';
        var k = 0;
        var char = 0;
        var output = $('#page-two');
        var back=false; // valida si se suma o se resta

        var app = {
            init: function(text, target){
                target.html('');
                char = text.length;
                this.sayHello(text, target);
            },
            sayHello: function(text, target){
                target.text(text.slice(0,k));
                var that = this;
 
                if(!back){ //valida que sea false

                    if(k ==text.length)back=!back ; // valida si k es igual longitud del arreglo para ir hacia atras
                    k++;
                }else{
                    k--; 
                    if(k == 0) back=!back; // valida que k sea igual a 0 para ir hacia adelante
                }

                var timer = setTimeout(function(){
                    that.sayHello(text, target);
                }, 80);
            }
        };
        app.init(msg, output);
    });
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

    *{
        margin: 0;
        padding: 0;
        boz-sizing: border-box;
        font-family: "Open Sans", sans-serif
    }
    body{
        background: linear-gradient(135deg,#00C4FF,#9D1BB2);
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 /* cursos effect */ 
 .typed-cursor{
    opacity: 1;
    font-weight: 300;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    -ms-animation: blink 0.7s infinite;
    -o-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    color: #fff;
    font-size: 2.5em;
}

@-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-ms-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-o-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="container">
  <span id="page-two"></span><span class="typed-cursor">|</span>
  <div class="clear"></div>
</section>

1
  • Gracias por el ejemplo planteado a la solución :)
    – Lou
    Commented el 27 ago. 2019 a las 5:23
1

Te dejo un ejemplo con borrar y volver a escribir:

$(document).ready(function(){
	var msg = 'Mensaje de prueba...';
	var k = 0;
  var l = 0;
	var char = 0;
	var output = $('#page-two');

	var app = {
		init: function(text, target){
			target.html('');
			char = text.length;
			this.sayHello(text, target);
		},
		sayHello: function(text, target){			
			var that = this;
			if(k < char){				
                            target.append(text[k]);
			    k++;
                            l = k;
			    var timer = setTimeout(function(){
				that.sayHello(text, target);
			    }, 80);
			} else {        
                            l--;
                            var newText = msg.substring(0, l);
                            target.html(newText);
                            var timer = setTimeout(function(){
					that.sayHello(text, target);
			    }, 80);
                            if (l == 0) {
                                k = 0;
                            }
                       }
		}
	};
	app.init(msg, output);
});
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

*{
	margin: 0;
	padding: 0;
	boz-sizing: border-box;
	font-family: "Open Sans", sans-serif
}
body{
	background: linear-gradient(135deg,#00C4FF,#9D1BB2);
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<section id="container">
		<div id="page-two"></div>
		<div class="clear"></div>
	</section>

1
  • 1
    Gracias por el tiempo dedicado saludos :)
    – Lou
    Commented el 27 ago. 2019 a las 5:24

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.