iBird Rose

пропиши этому div height: 100%; и заодно и для .promo-slide

.slick-slide > div {height: 100%;}
.promo-slide {height: 100%;}

где сравниваешь - там и применяешь

if (slovo.toLowerCase() == newArr[i].toLowerCase()) {

на эвент переключения таба вызывай:
$('.your-slider').slick('setPosition');

ну там же видно как сделано. position: sticky вешается на секции, когда они доходят до начала экрана и создается такой эффект. пару строк в js https://codepen.io/ibird/pen/rNdGBmo

1) при клике создаешь под курсором div. он должен быть круглым и нужного тебе цвета.
2) после этого запускаешь анимацию transform scale для этого дива.
3) выбираешь время анимации и анализируешь когда этот круг займет все пространство.
4) и с таймаутом этого выбранного времени закрашиваешь body в нужный цвет у удаляешь круг

клонируй элемент не один раз, а пока не забьется весь window. к примеру https://codepen.io/ibird/pen/VwQGGLb

нагуглил https://codepen.io/CreativeSeo33/pen/rxWOWm
но там сломана одна библиотека. починил:
https://codepen.io/ibird/pen/BaYJLRw

$('.block').on('click', function () {
		var id = $(this).attr('id');
	});

тк ты ж уже наполовину сделал через css. зачем тебе js, если можно доделать на css?