Foros del Web » Programando para Internet » Jquery »

Simple Typing Script

Estas en el tema de Simple Typing Script en el foro de Jquery en Foros del Web. Buenas. Quería dejarles un simple script que acabo de crear al estar aburrido. La verdad es muy simple, pero bueno, ami me viene bien para ...
  #1 (permalink)  
Antiguo 10/10/2017, 15:11
 
Fecha de Ingreso: agosto-2015
Ubicación: Rosario - Argentina
Mensajes: 369
Antigüedad: 2 años, 2 meses
Puntos: 8
Simple Typing Script

Buenas.
Quería dejarles un simple script que acabo de crear al estar aburrido.

La verdad es muy simple, pero bueno, ami me viene bien para los juegos, en los momentos de "cinemáticas" donde hablan los personajes.
O para mostrar mensajes en nuestras webs de manera sencilla.

Clase Typed:
Código Javascript:
Ver original
  1. class Typed{
  2.     constructor(){
  3.         this.selector;
  4.         this.typeds = [];
  5.         this.id = 0;
  6.         this.char = 0;
  7.         this.interval;
  8.         this.lightActive = true;
  9.         this.html;
  10.         this.string;
  11.         Typed.light = {fade: 250};
  12.         return this;
  13.     }
  14.     create(selector, object, typingTime, timeBeforeClear, timeNextText, repeat){
  15.         if(!typingTime){
  16.             this.typingTime = 0;
  17.         }
  18.         if(!timeBeforeClear){
  19.             this.timeBeforeClear = 0;
  20.         }
  21.         if(!timeNextText){
  22.             this.timeNextText = 0;
  23.         }
  24.         if(!repeat){
  25.             this.repeat = false;
  26.         }
  27.         this.typingTime = typingTime;
  28.         this.timeBeforeClear = timeBeforeClear;
  29.         this.timeNextText = timeNextText;
  30.         this.repeat = repeat;
  31.         for(var i = 0; i < object.length; i++){
  32.             this.typeds.push(object[i]);
  33.         }
  34.         this.selector = selector;
  35.         return this;
  36.     }
  37.     add(object){
  38.         for(var i = 0; i < object.length; i++){
  39.             this.typeds.push(object[i]);
  40.         }
  41.     }
  42.     start(){
  43.         var self = this;
  44.         if(!this.lightEffect){
  45.             this.LightInterval = setInterval("Typed.lightFade()", 0);
  46.             this.lightEffect = true;
  47.         }
  48.         if(this.typeds[this.id] != undefined){
  49.             setTimeout(function(){
  50.                 self.read();
  51.             }, this.typingTime);
  52.         }else{
  53.             if(this.repeat){
  54.                 this.resetTypping();
  55.             }
  56.         }
  57.     }
  58.     read(){
  59.         this.removeLight();
  60.         var self = this;
  61.         if(this.char >= this.typeds[this.id].length){
  62.             setTimeout(function(){
  63.                 self.delete();
  64.             }, this.timeBeforeClear);
  65.             this.addLight();
  66.             return false;
  67.         }
  68.         $(this.selector.selector).append(this.typeds[this.id].charAt(this.char));
  69.         this.addLight();
  70.         this.char++;
  71.         setTimeout(function(){
  72.             self.read();
  73.         }, this.typingTime);
  74.     }
  75.     delete(){
  76.         var self = this;
  77.         this.removeLight();
  78.         this.html = $(this.selector.selector).html();
  79.         if(this.char <= 0){
  80.             this.id++;
  81.             setTimeout(function(){
  82.                 self.start();
  83.             }, this.timeNextText);
  84.             this.addLight();
  85.             return false;
  86.         }
  87.         this.string = this.html.substr(0, this.html.length-1);
  88.         $(this.selector.selector).html(this.string);
  89.         this.char--;
  90.         this.addLight();
  91.         setTimeout(function(){
  92.             self.delete();
  93.         }, this.typingTime);
  94.     }
  95.     addLight(){
  96.         $(this.selector.selector).append("<span class='light'></span>");
  97.     }
  98.     removeLight(){
  99.         $(this.selector.selector+" .light").remove();
  100.     }
  101.     static lightFade(){
  102.         this.lightActive = !this.lightActive;
  103.         if(this.lightActive){
  104.             $(".light").fadeOut(Typed.light.fade);
  105.             return false;  
  106.         }
  107.         $(".light").fadeIn(Typed.light.fade);
  108.     }
  109.     resetTypping(){
  110.         this.id = 0;
  111.         this.char = 0;
  112.         this.start();
  113.     }
  114. }

Código para inicializar:

#1 = Elemento donde escribira Ej: $(".text")
#2 = Array de textos Ej: ["Mensaje 1", "Mensaje 2", "Etc..."]
#3 = Tiempo que tardara en escribir el mensaje
#4 = Tiempo de espera antes de borra mensaje
#5 = Tiempo de espera antes de mostrar el siguiente mensaje
#6 = Repeticion >> True = si, False = no.

Código Javascript:
Ver original
  1. var T1 = new Typed();
  2. T1.create(#1, #2, #3, #4, #5, #6);
  3. T1.start();

html basico:
Código HTML:
<div id='typping-content'>
      <p class='text'></p>
</div> 
DEMO: AQUI

Espero que a alguien le sirva aunque sea muy básico.
saludos!



La zona horaria es GMT -6. Ahora son las 15:03.