JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div id="example-1" class="text">
Тут Ваш текст, который будет появляться.
Строка за строкой, с плавным эффектом.
Все это возможно при помощи
jQuery и CSS.</div>

<div id="example-2" class="text">
Тут Ваш текст, который будет появляться.
Строка за строкой, с плавным эффектом.
Все это возможно при помощи
jQuery и CSS.</div>

<div id="example-3" class="text">
Тут Ваш текст, который будет появляться.
Строка за строкой, с плавным эффектом.
Все это возможно при помощи
jQuery и CSS.</div>

CSS

html {
    min-height: 100%
    }
body {
    min-height: 100%;
	margin:0;
	padding:0;
	font: 15px Tahoma;
	color:#100f0f;
    }
p {
    margin: 1em 0;
    text-align: center
    }


.text{padding:0px 0px 0px 100px; /*width:350px;*/ display:none; }
.text .text-inner { opacity: 0; }
.text .text--opacity {
  /*-webkit-transition: opacity .1s ease-in-out;
  transition: opacity .1s ease-in-out;*/
  opacity: 1;
}

JavaScript

$(document).ready(function(){
 $.fn.animate_Text = function() {
  var string = this.text();
  return this.each(function(){
   var $this = $(this);
   $this.html(string.replace(/./g, '<span class="text-inner">$&</span>'));
   $this.find('.text-inner').each(function(i, el){
    setTimeout(function(){ $(el).addClass('text--opacity'); }, 5 * i);
   });
  });
 };
 
 
 setTimeout(function(){ 
 		$('#example-1').show();
   $('#example-1').animate_Text();
 },0);
 
 setTimeout(function(){ 
 		$('#example-2').show();
   $('#example-2').animate_Text();
 },500);
 
 setTimeout(function(){ 
 		$('#example-3').show();
   $('#example-3').animate_Text();
 },1000);
   
});