JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<div class="blockhomestart" type="button" >ggg
</div>
<div class="logonew">
    <div></div>
    <div></div>
    <div></div>
</div>


<div class="contef">
    <span class="contef1">
        8 (495) 789 88 38
    </span>
    <span class="contef2">
        [email protected]
    </span>
    <span class="contef3">
        Заказать обратный звонок
    </span>
    <span class="contef4">
        Трейд маркетинговое агенство и сервис поиска работы для молодежи по всей России
    </span>
</div>

CSS

body{background-color:#333;height:20000px;}
.blockhomestart{position:fixed;top:10px;left:10px;z-index:10;background:white;width:100px;height:50px;}
/* = = = = = = = = = = = = = = = = = = = */
.contef{margin:0 auto;width:100%;}
.contef > span{display:block;color:#fff;font:1em/normal arial;text-align:center;opacity:0;text-shadow:0 0 1px #bbb;height:25px;line-height:25px;}
.contef > span:hover{text-shadow:0 0 2px #bbb;font-size:1.2em;}
.contef .contef1,.contef .contef3{
    margin-left:200px;
}
.contef .contef2{
    margin-right:200px;
}
.contef .contef4{
    margin-top:40px;
}
/* = = = = = = = = = = = = = = = = = = = */
.logonew{height:73px;width:730px;position:relative;}
.logonew div{line-height:73px;}
.logonew div:nth-child(1),
.logonew div:nth-child(2),
.logonew div:nth-child(3){background-repeat:no-repeat;}
.logonew div:nth-child(1),.logonew div:nth-child(3){height:100%;position:absolute;top:0;width:50%;z-index:2;}
.logonew div:nth-child(1){left:0;background-position:100%;}
.logonew div:nth-child(2){margin-left: 121px;height: 100%;opacity:0;}
.logonew div:nth-child(3){right:0;}
.logonew div:nth-child(1){
    background-image:...

JavaScript

$(document).ready(function () {
    var logonew1 = $('.logonew div:nth-child(1)');
    var logonew2 = $('.logonew div:nth-child(2)');
    var logonew3 = $('.logonew div:nth-child(3)');
    var t1 = 1600; //старт скрипта после постройки страницы
    var t2 = 1000; //время анимации
    var t3 = 50; //время появления recruitment
    setTimeout(function () {
        logonew1.animate({
            width: "121px"
        }, t2);
        setTimeout(function () {
            logonew2.animate({
                opacity: "1"
            }, 50);
        }, t2);
        logonew3.animate({
            width: "173px"
        }, t2);
    }, t1);
    
    //=====================
    
    setTimeout(function () {
            $(".contef1,.contef2,.contef3").animate({
                opacity: "1",
                margin: "0"
            }, 500);
        setTimeout(function () {
            $(".contef4").animate({
                opacity: "1"
            }, 500);
            
            }, 1000);
        }, 3000);
    //======================
    
    var starthome =  $(".blockhomestart");
    var contef1 =  $(".contef1");
    var contef2 =  $(".contef2");
    var contef3 =  $(".contef3");
    var contef13 =  $(".contef1,.contef3");
    var contef123 =  $(".contef1,.contef2,.contef3");
    var contef4 =  $(".contef4");
    
    
    
starthome.click(
  function(){
    var contef123opc = contef4.css('opacity');
        if (contef123opc=='1'){
        $("body,html").animate({"scrollTop":0},500);
            contef2.css("margin-right","200px");
            contef13.css("margin-left","200px");
            contef123.css("opacity","0");
            contef4.css("opacity","0");
            logonew1.css("width","50%");
            logonew2.css("opacity","0");
            logonew3.css("width","50%");
          
            
            
            setTimeout(function () {
                logonew1.animate({
                    width: "121px"
                }, t2);
               ...