<!--Поместить в начало страницы или в шапку-->
<!--Настройки перехода-->
<style>
:root {
--BgOverlay: #000; /*цвет перехода*/
--url: url("https://static.tildacdn.com/tild3234-3161-4130-b065-616563373433/Frame_113.svg"); /*путь до изображения, оставить пустым, если не нужно*/
}
</style>
Под первым кодом создаем блок Т123 и помещаем в него код
<!--Поместить в начало страницы или в шапку-->
<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>