Проблема с ссылками при прокрутке

[titanushkaD]

Сделал вот такой эффект  прокрутки вглубь сайта с появляющимися картинками и исчезающими когда прокручиваешь.

let zSpacing = -1000,
		lastPos = zSpacing / 5,
		$frames = document.getElementsByClassName('frame'),
		frames = Array.from($frames),
		zVals = []

window.onscroll = function() {

	let top = document.documentElement.scrollTop,
			delta = lastPos - top

	lastPos = top

	frames.forEach(function(n, i) {
		zVals.push((i * zSpacing) + zSpacing)
		zVals[i] += delta * -5.5
		let frame = frames[i],
				transform = `translateZ(${zVals[i]}px)`,
				opacity = zVals[i] < Math.abs(zSpacing) / 1.5 ? 1 : 0
		frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity}`)
	})

}

Текст и фото скролятся отлично но если в текст вставить ссылку или кнопку, то они не активными становятся. Если поменять свойство текста, вместо relative  на ststic,  ссылка работает нормально но уже понятно что её уже не подвинуть. Я не понимаю почему эти ссылки появляются но не работают, ведь если дело в том, что ты должен попасть на нужный фрейм что бы активировать ссылку то почему в таком случае работает static, при том что он тоже появляется и исчезает? 

  И как вообще сделать, что бы ссылка была активна и работала всё время, с появления и до исчезновения?

Edited March 30, 2022 by titanushkaD

[Igor Schnaider]

Похоже, контекст наложения сбивается. Попробуйте его явно "прибить". Можете для .frame__content добавить какое-нибудь из правил:

.frame__content {
  /* option #1 */
  z-index: 0;

  /* option #2 */
  transform: translateZ(0);
}

 

[Switch74]

выложите в какую-нибудь песочницу, чтобы можно было увидеть этот эффект

[titanushkaD]

https://codepen.io/titanushkaD/pen/xxpXZWo

 

14 часов назад, Switch74 сказал:

выложите в какую-нибудь песочницу, чтобы можно было увидеть этот эффект

Выше кинул ссылку на песочницу

[titanushkaD]

21 час назад, Igor Schnaider сказал:

Похоже, контекст наложения сбивается. Попробуйте его явно "прибить". Можете для .frame__content добавить какое-нибудь из правил:

.frame__content {
  /* option #1 */
  z-index: 0;

  /* option #2 */
  transform: translateZ(0);
}

 

Спасибо больше за внимание и помощь.  Уже намного лучше, теперь буду пилить дальше.

[h1mera]

30.03.2022 в 18:10, titanushkaD сказал:

Сделал вот такой эффект  прокрутки вглубь сайта с появляющимися картинками и исчезающими когда прокручиваешь.

let zSpacing = -1000,
		lastPos = zSpacing / 5,
		$frames = document.getElementsByClassName('frame'),
		frames = Array.from($frames),
		zVals = []

window.onscroll = function() {

	let top = document.documentElement.scrollTop,
			delta = lastPos - top

	lastPos = top

	frames.forEach(function(n, i) {
		zVals.push((i * zSpacing) + zSpacing)
		zVals[i] += delta * -5.5
		let frame = frames[i],
				transform = `translateZ(${zVals[i]}px)`,
				opacity = zVals[i] < Math.abs(zSpacing) / 1.5 ? 1 : 0
		frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity}`)
	})

}

Текст и фото скролятся отлично но если в текст вставить ссылку или кнопку, то они не активными становятся. Если поменять свойство текста, вместо relative  на ststic,  ссылка работает нормально но уже понятно что её уже не подвинуть. Я не понимаю почему эти ссылки появляются но не работают, ведь если дело в том, что ты должен попасть на нужный фрейм что бы активировать ссылку то почему в таком случае работает static, при том что он тоже появляется и исчезает? 

  И как вообще сделать, что бы ссылка была активна и работала всё время, с появления и до исчезновения?

Сам сделал этот эффект? Ну или вообще сам писал этот код?