STEP INTO SPRING OFFER |

Делаем смену фона и прозрачности заголовков в ZeroBlock в Tilda

Пример выполнен в таком порядке
1. Создали ZeroBlock
2. Создали заголовки в ZeroBlock и проставили им ссылки #title1 .... #title2
3. Добавили скрипт на страницу
4. Прописали в скрипте ID нашего ZeroBlock - #rec50393581
4. Добавили ссылки на фото для каждого заголовка в скрипте

Скрипт вставили в блок Другое►T123
<style>
/*Плавность эффекта для заголовков*/
.tn-atom{
    transition:all 0.5s cubic-bezier(0, 0, 0.8, 1.0);
}
/*Стиль с прозрачностью*/
.hovstyle{
    opacity:0.3;
}
.bgchange{
    transition:all 0.5s cubic-bezier(0, 0, 0.8, 1.0);  
}
    
</style>

<script>
 //Задаём переменной ID нашего ZeroBlock    
 var blockZeroID = '#rec50393581';
 var blockZeroBG = blockZeroID + " " + ".t396__carrier" ;
 //Добавляем класс к нашим заголовкас-ссылкам
 $(blockZeroID + " "+ "a").addClass("hovtitle");
 //Класс для фона
 $(blockZeroBG).addClass("bgchange");
 
//При наведении на любой заголовок в нашем ZeroBlock 
 $('.hovtitle').hover(
function(){
     //Добавляем всем заголовком класс с прозрачностью
     $(".hovtitle").addClass("hovstyle");
     //Делаем непрозрачным заголовок на который навели
     $(this).removeClass("hovstyle");
//Если наводят на заголовок с определённой ссылкой, то меняем фон     
if ($(this).attr('href') == "#title2"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BMy)') };
if ($(this).attr('href') == "#title3"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BNJ)') };
if ($(this).attr('href') == "#title4"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BQD)') };
if ($(this).attr('href') == "#title5"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Bnc)') };
if ($(this).attr('href') == "#title6"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Brs)') };
if ($(this).attr('href') == "#title7"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BtD)') };
if ($(this).attr('href') == "#title8"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Bu8)') };
if ($(this).attr('href') == "#title9"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BuQ)') };
if ($(this).attr('href') == "#title10"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Buv)') };
if ($(this).attr('href') == "#title11"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BvH)') };
},
function(){
    //Когда на заголовки не наводим, удаляем класс с прозрачностью
     $(".hovtitle").removeClass("hovstyle");
    //Когда не наводим на заголовки делаем такой фон 
     $(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BFu)');
});
</script>
Made on
Tilda