<script>
//Присваиваем переменной класс наших фото
var imgkls = '.t552__blockimg';
//Присваиваем переменным ID наших блоков и считаем кол-во фото
//Первый блок
var phblk_1 = '#rec42354133'; var dl_1 = $(phblk_1+' '+imgkls).length -1 ;
//Второй блок
var phblk_2 = '#rec42354135'; var dl_2 = $(phblk_2+' '+imgkls).length -1 ;
//Третий блок
var phblk_3 = '#rec42354137'; var dl_3 = $(phblk_3+' '+imgkls).length -1 ;
//Скрываем лишние блоки на старте
$(phblk_2).css('display' , 'none')
$(phblk_3).css('display' , 'none')
//Добавляем надпись и дополнительный класс для курсора на последнее фото нужных блоков
$(phblk_1+' '+imgkls+':eq('+dl_1+')').addClass("blurstyle").before('<div class="blurblk"><img src="https://static.tildacdn.com/tild3431-6535-4838-b666-626565633966/refreshpagearrowbutt.svg" data-original="https://static.tildacdn.com/tild3431-6535-4838-b666-626565633966/refreshpagearrowbutt.svg" class="loadicon" imgfield="img"></div>');
$(phblk_2+' '+imgkls+':eq('+dl_2+')').addClass("blurstyle").before('<div class="blurblk"><img src="https://static.tildacdn.com/tild3431-6535-4838-b666-626565633966/refreshpagearrowbutt.svg" data-original="https://static.tildacdn.com/tild3431-6535-4838-b666-626565633966/refreshpagearrowbutt.svg" class="loadicon" imgfield="img"></div>');
//Загружаем оригинальные фото
$(".t552__blockimg").addClass("loaded");
var y = $("div.t552__blockimg").length;
var x =0;
while (x <= y) {
$(".t552__blockimg:eq("+x+")").css('backgroundImage', 'url('+$(".t552__blockimg:eq("+x+")").data("original")+')');
x++;
}
//Считываем высоту фото и присваиваем её для всех блоков
function visota(){
var hg = $(imgkls).css("height");
var wd = $(imgkls).css("width");
$(imgkls).css("height", hg);
$(".blurblk").css("height", hg);
$(".blurblk").css("width", wd);
};
//Проверяем размер фото через 1 с после запуска
setTimeout(function() {
visota();
}, 1000);
//Проверяем размер фото при скролле
$(window).scroll(function() {
var top = $(document).scrollTop();
//Если перемещение больше 5 px
if (top >= 5) { visota()}
});
//Проверяем размер фото при изменении размера браузера
$(window).resize(function(){
visota();
});
//Клик по первому размытому блоку
$('.loadicon:eq(0)').click(function() {
//Рассчитываем высоту
visota();
//Удаляем иконку с последнего фото первого блока
$("div.blurblk:eq(0)").remove();
//Удаляем эффект блика
$("div.ink:eq(0)").remove();
//Удаляем эффект размытия с последнего фото первого блок
$(phblk_1+' '+imgkls+':eq('+dl_1+')').removeClass("blurstyle")
//Показываем нижний блок
$(phblk_2).slideDown(1000);
});
//Клик по второму размытому блоку
$('.loadicon:eq(1)').click(function() {
//Рассчитываем высоту
visota();
//Удаляем иконку с последнего фото второго блока
$("div.blurblk").remove();
//Удаляем эффект блика
$("div.ink").remove();
//Удаляем эффект размытия с последнего фото первого блок
$(phblk_2+' '+imgkls+':eq('+dl_2+')').removeClass("blurstyle")
//Показываем нижний блок
$(phblk_3).slideDown(1000);
});
</script>
<style>
/*Задаём прозрачность и размытие для нужных блоков блоков*/
.blurstyle {
opacity: 0.7;
-webkit-filter: blur(5px);
filter: blur(5px);
}
/*Стили для размытия фото*/
.blurblk {
cursor: pointer;
position: absolute;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
/*Стили для иконки со стрелочками*/
.loadicon{
width: auto;
max-height: 50%;
display: block;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform 1s ease-in-out;
}
/*Эффект при наведении*/
.loadicon:hover {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
</style>