Сделал вот такой эффект прокрутки вглубь сайта с появляющимися картинками и исчезающими когда прокручиваешь.
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, при том что он тоже появляется и исчезает?
И как вообще сделать, что бы ссылка была активна и работала всё время, с появления и до исчезновения?
titanushkaD changed their profile photo