JSFiddle - React, Tailwind, and code Playground

by shelukhin89

HTML

<link href="//fonts.googleapis.com/css?family=Cormorant+Infant:300,300i,400,400i,500,500i,600,600i,700,700i&subset=cyrillic" rel="stylesheet"> 
<script type="text/javascript" src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
(function(t,e){if(typeof define==="function"&&define.amd){define(["jquery"],e)}else if(typeof exports==="object"){module.exports=e(require("jquery"))}else{e(t.jQuery)}})(this,function(t){t.transit={version:"0.9.12",propertyMap:{marginLeft:"margin",marginRight:"margin",marginBottom:"margin",marginTop:"margin",paddingLeft:"padding",paddingRight:"padding",paddingBottom:"padding",paddingTop:"padding"},enabled:true,useTransitionEnd:false};var e=document.createElement("div");var n={};function i(t){if(t in e.style)return t;var n=["Moz","Webkit","O","ms"];var i=t.charAt(0).toUpperCase()+t.substr(1);for(var r=0;r<n.length;++r){var s=n[r]+i;if(s in e.style){return s}}}function r(){e.style[n.transform]="";e.style[n.transform]="rotateY(90deg)";return e.style[n.transform]!==""}var s=navigator.userAgent.toLowerCase().indexOf("chrome")>-1;n.transition=i("transition");n.transitionDelay=i("transitionDelay");n.transform=i("transform");n.transformOrigin=i("transformOrigin");n.filter=i("Filter");n.transform3d=r();var a={transition:"transitionend",MozTransition:"transitionend",OTransition:"oTransitionEnd",WebkitTransition:"webkitTransitionEnd",msTransition:"MSTransitionEnd"};var o=n.transitionEnd=a[n.transition]||null;for(var u in n){if(n.hasOwnProperty(u)&&typeof...

CSS

.map {
  background-color: #efc289;
  background-image: url("http://previews.123rf.com/images/daniel_cozma/daniel_cozma1108/daniel_cozma110800005/10183085-Old-map-and-compass-3D-generated-Stock-Photo-world.jpg");
  background-position: 50% 50%;
  height: 500px;
  position:relative;
}
.map p {
    color: #531d00;
    font-family: "Cormorant Infant",serif;
    font-size: 22px;
    font-style: italic;
    font-weight: 700;
    text-align: justify;
    width: 400px;
    display:none;
    position:absolute;
    top:30px;
    left:50%;
    margin-left:-200px;
}
.but {
  background-color: #000000;
  color: #ffffff;
  cursor: pointer;
  font-family: Arial;
  font-weight: 700;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.but:hover {
  background-color: #333333;
}

JavaScript

$(document).ready(function() {
	function randomInteger(min, max) {
		var rand = min + Math.random() * (max - min)
		rand = Math.round(rand);
		return rand;
	}
  
	function magicTxt($bl1,$bl2){
  	var b1 = $('#'+ $bl1),
    		b2 = $('#'+ $bl2),
    		t1 = b1.text(),
    		t2 = b2.text(),
        l1 = b1.text().length,
    		l2 = b2.text().length;
        
		function b1fun(){
    	if(b1.find('span').length == 0){
        var txtData = '';
        for(var i = 0; i < l1; i++){
          txtData += '<span>'+ t1[i] +'</span>';
        }
        b1.html(txtData);
      }
      
      
      if(b2.find('span').length == 0){
        var txtData = '';
        for(var i = 0; i < l2; i++){
          txtData += '<span>'+ t2[i] +'</span>';
        }
        b2.html(txtData);
      }
      b2.find('span').transition({opacity: 0, scale: 0.6},0,'linear');
      
      var b1c = 0; 
      b1.find('span').each(function(){
        var $this = $(this),
            speed = randomInteger(1, 10) * 100;
        b1c++; 
        $this	.transition({opacity: 1},speed,'linear')
              .transition({opacity: 0, scale: 0.1},1000,'linear',function(){
                if(b1c == l1){
                //  b2fun();
                }
            });
      });
    }
    function b2fun(){
      b1.hide();
      b2.show();
      b2.find('span').each(function(){
        var $this2 = $(this),
            speed2 = $this2.attr('data-speed'),
            ms2 = parseFloat(speed2) * 50;
        $this2	.transition({opacity: 0},ms2,'linear')
          			.transition({opacity: 1, scale: 1},1000,'linear');
      });
    }
    b1fun();
  }
  
	$(document).on('click','.but',function(){
  	/*
  	if($('.txt1').is(':visible')){
    	magicTxt('txt1','txt2');
    }else{
    	magicTxt('txt2','txt1');
    }
    */
    magicTxt('txt1','txt2');
  });
});