CSS
- 2 ответа
- 0 вопросов
1
Вклад в тег
const animItems = document.querySelectorAll(`._anim-items`)
if (animItems.length > 0) {
window.addEventListener(`scroll`, animOnScroll)
function animOnScroll() {
for (let index = 0; index < animItems.length; index++) {
const animItem = animItems[index]
const animItemHeight = animItem.offsetHeight
const animItemOffSet = offset(animItem).top
const animStart = 4
let animItemPoint = window.innerHeight - animItemHeight / animStart
if (animItemHeight > window.innerHeight) {
animItemPoint = window.innerHeight - window.innerHeight / animStart
}
if ((pageYOffset > animItemOffSet - animItemPoint) && pageYOffset < (animItemOffSet + animItemHeight)) {
animItem.classList.add(`_active`)
} else {
if (!(animItem.classList.contains(`_anim-no-hide`))) {
animItem.classList.remove(`_active`)
}
}
}
}
function offset(el) {
const rect = el.getBoundingClientRect()
let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
let scrollTop = window.pageYOffset || document.documentElement.scrollTop
return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
}
setTimeout(() => {
animOnScroll()
}, 300)
}.header {
transform: translate(0, -80%);
opacity: 0.5;
transition: all 1s ease 0s;
}
.header._active {
transform: translate(0, 0);
opacity: 1;
}.nav {
background: #f00;
width: 200px;
height: 150px;
overflow-y: scroll;
}
.subnav {
background: #00f;
position: absolute;
left: 200px;
top: 16px;
width: 200px;
}