A
Какие секции, <section> ? Что с ней происходит чтобы считать что она активная?
Если пользователь полностью прокрутил предыдущую секцию. Или от предыдщей осталась небольшая часть на экране.
Size: a a a
2020 July 01
VL
Если пользователь полностью прокрутил предыдущую секцию. Или от предыдщей осталась небольшая часть на экране.
А, тогда intersectionObserver можешь использовать
VL
дать код тебе, чтобы сам смог изменить не много и работал у тебя код этот?
A
дать код тебе, чтобы сам смог изменить не много и работал у тебя код этот?
Если есть то буду благодарен. Как для примера)
V
Если есть то буду благодарен. Как для примера)
кст да, intersection observer даже еще лучше
VL
Если есть то буду благодарен. Как для примера)
let images = document.querySelectorAll('.imgz');
//
let options = {
root: null,
rootMargin: '0px',
threshold: 0.05,
}
//
let callback = function(entries, observer){
entries.forEach(myImgX =>{
console.log(myImgX.intersectionRatio);
if(myImgX.intersectionRatio > 0){
loadImage(myImgX.target);
let mt = myImgX.target;
mt.style.visibility = 'visible';
mt.style.width = 330 +'px';
mt.style.opacity = '1';
}
});
};
//
function loadImage(image){
image.src = image.getAttribute('data');
};
//
let observer = new IntersectionObserver(callback, options);
//
images.forEach(img =>{
observer.observe(img);
})
//
<img src="" data="img/for_emmanuel_tv1.jpg" class="imgz"/>A
let images = document.querySelectorAll('.imgz');
//
let options = {
root: null,
rootMargin: '0px',
threshold: 0.05,
}
//
let callback = function(entries, observer){
entries.forEach(myImgX =>{
console.log(myImgX.intersectionRatio);
if(myImgX.intersectionRatio > 0){
loadImage(myImgX.target);
let mt = myImgX.target;
mt.style.visibility = 'visible';
mt.style.width = 330 +'px';
mt.style.opacity = '1';
}
});
};
//
function loadImage(image){
image.src = image.getAttribute('data');
};
//
let observer = new IntersectionObserver(callback, options);
//
images.forEach(img =>{
observer.observe(img);
})
//
<img src="" data="img/for_emmanuel_tv1.jpg" class="imgz"/>Спасибо, попробую разобраться
2020 July 02
VL
Спасибо, попробую разобраться
или могу в кодепен попробывать пример сделать
A
или могу в кодепен попробывать пример сделать
Ну это смотря как со временем и с желанием)
VL
Там просто и html будет наглядо виден
A
Там просто и html будет наглядо виден
Буду благодарен)
A
Вроде задачка простой должна быть. Но что-то я совсем завис и примеров нагуглить не смог)
М
Ну он будет следить за элементами в области видимости, тебе еще надо придумать как связать это с полоской
A
Ну он будет следить за элементами в области видимости, тебе еще надо придумать как связать это с полоской
Тут я думаю не сложно. Есть к примеру 10 секций, есть 10 элементов в полоске. Соответственно какая секция в области видимости, такую полоску и делаем активной)
VL
Тут я думаю не сложно. Есть к примеру 10 секций, есть 10 элементов в полоске. Соответственно какая секция в области видимости, такую полоску и делаем активной)
можешь дать Html с кодом секций?
М
Тут я думаю не сложно. Есть к примеру 10 секций, есть 10 элементов в полоске. Соответственно какая секция в области видимости, такую полоску и делаем активной)
а как ты определишь какая по счету показана ?
A
можешь дать Html с кодом секций?
Минуту
A
можешь дать Html с кодом секций?
A
а как ты определишь какая по счету показана ?
Через getBoundingClientRect() получилось сделать. Но чувствую нагородил я там)