Destell

html-webpack-inline-source-plugin

$('body').on('click', function(event){
		if (!$(event.target).closest('.menu').length) {
			$('.menu').removeClass('menu-opened')
		}
	});

min < window.innerWidth < max

Там используется не тень, а блок с градиентом и filter: blur.

Получаете позиции элементов, позицию фиксированного блока, при скролле сравниваете их.

if ( $(window).scrollTop() > block && $(window).scrollTop() < block + block.height()) {
....

Копаете как раз туда

Как вариант - получать координаты центра нужных сторон блоков и задавать их концам "линии".

<svg>
    <script>
         Код
    </script>
</svg>

Попробуйте таким образом (вставив код в конец svg и добавив картинку через object) либо вставлять svg напрямую в html.

setInterval

Не вижу, где обрезается картинка. Самый простой вариант - все треугольники сделать отдельными блоками, позиционировать абсолютно от родительского контейнера с крупной полосой и текстом, далее анимировать, transform и opacity в помощь.

Самый простой вариант, который пришел на ум - заюзать setTimeout или цикл. Не обдумывая разработку перелистывания для себя так точно не скажу, не дорос еще.

Получаем позицию блока-родителя (.slider), размером, например 400х400, получаем позицию активного слайда (.slide .active) аналогичного размера (чтобы проще было воспринимать), смещаем полосу (.slider__list) со слайдами на эту позицию. Все это в сет таймаут (рекурсивный), сеттаймер или цикл, но это мысли навскидку.

2. Мне нужно сделать таких блоков 9 штук. Есть ли какое то более красивое и сокращенное решение?

Что-то вроде