<!--Поместить в начало страницы или в шапку-->

<!--Настройки перехода-->

<style>
    :root {
        --BgOverlay: #000; /*цвет перехода*/
        --url: url("https://static.tildacdn.com/tild3234-3161-4130-b065-616563373433/Frame_113.svg"); /*путь до изображения, оставить пустым, если не нужно*/
        
}
</style>

<!--Поместить в начало страницы или в шапку-->

<script>
    jQuery('<div>', {
    class: 'overlay',
}).appendTo('.t-body');
</script>
<script>
    jQuery('<div>', {
    class: 'bg-1',
}).appendTo('.t-body');
</script>
<script>
    setTimeout(function() {
  $('.bg-1').addClass('none');
}, 1500);
</script>
<script>
$('.overlay').each(function() {
  $(this).insertBefore($(this).prev());
});
</script>
<script>
$('.bg-1').each(function() {
  $(this).insertBefore($(this).prev());
});
</script>



<style>

    .overlay {
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100vh;
        background: var(--BgOverlay);
        overlay: hidden;
        transform: translate(0%, 100%);
        transition:-webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
        background-image: var(--url);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition-delay: 0.4s;
    }
    
        .overlay-1 {
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100vh;
       background: var(--BgOverlay);
        transform: translate(0%, 0%);
        overlay: hidden;
        transition:-webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
        background-image: var(--url);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition-delay: 0.4s;
    }


.bg-1 {
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100vh;
        background: var(--BgOverlay);
        overlay: hidden;
        transition:-webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
        animation-name: animate-fade;
        animation-duration: 0.9s;
        animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
        animation-delay: 0.7s;
        background-image: var(--url);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
}
    @keyframes animate-fade {
  0% {
    transform: translate(0%, 0%);
    opacity: 1;
   
  }
  100% {
    transform: translate(0%, 100%);
    opacity: 1;
   
  }
}
    .none {
        display: block;
        top: 0px;
        z-index: 500;
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 995;
        opacity: 0;
        display:none;
    }
</style>

<script>
        $(document).ready(function(){
        var Overlay = '.overlay'
        var Bodyback = '.t-records'
        var Trigger = '.transition';
        
        $(Trigger).click(function(){
            $(Overlay).addClass('overlay-1');
            $(Bodyback).addClass('t-records-1');

        });
 
    });
</script>


<style>
    .t-records-1 {
        transition:-webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
        /*transform: translate3d(0, 5%, 0) scale(0.92);*/
    }
</style>