#javascript #jquery #css
#javascript #jquery #css — код
Вопрос:
У меня есть изображение, которое я расположил: sticky; оно также анимировано, чтобы исчезать и исчезать с интервалом в 6 секунд. Я хочу, чтобы анимированное изображение полностью исчезло, когда родительский div прокручивается, скажем, на 90%. Я видел сценарии, которые управляют исчезновением на определенном расстоянии в пикселях от верхней части страницы (или div), но это не сработает, поскольку высота родительского div зависит от содержимого (и изменяется в зависимости от размера каждого устройства), мне нужно, чтобы он контролировался определенным процентом, а не статическое количество пикселей.
Комментарии:
1. Не могли бы вы показать нам что-нибудь из вашего кода?
Ответ №1:
Звучит так, как будто intersectionObserver это было бы полезно здесь.
Вы можете настроить его так, чтобы, когда отображается процент элемента, вы могли что-то сделать. Это задается с помощью порогового параметра.
См. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API для деталей.
Если вы опубликуете свой код, мы посмотрим, как это может помочь.
ОБНОВЛЕНИЕ: использование кода, данного в этом фрагменте, помещает div высотой 10% абсолютно в нижней части текста и наблюдает, когда он входит и когда он выходит из области просмотра.
ДАЛЬНЕЙШЕЕ ОБНОВЛЕНИЕ зеленый квадрат исчезает, когда мы приближаемся к нижней части, добавляя еще один набор ключевых кадров, исчезает.
let observation = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {document.querySelector('.an-inner-box').style.animation = 'disappear 3s forwards 1';}// it's in view do something as we are near the bottom
else { document.querySelector('.an-inner-box').style.animation = 'emerge 6s forwards infinite';} // it's gone out of view so do something as we are not near the bottom
}
)};
let observer = new IntersectionObserver(observation, {});// no options needed as default will trigger observer on as little as 1px overlap and viewport is the default
let observed = document.querySelector('.observed');
observer.observe(observed);
/* I don't know what this does so have commented out for now. Reinstate if required of course.
$(window).scroll(function(){
$(".an-inner-box").css("opacity", 1 - $(window).scrollTop() / 1100);
});*/ .a-container {
position: relative;
width: 70%;
height: auto;
margin-top: 0;
padding-top: 0;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
background-color: pink;
}
.an-outer-box {
position: absolute;
display: flex;
justify-content: center;
top: 10%;
width: 40%;
height: 90%;
background-color: red;
}
.an-inner-box {
position: sticky;
top: 40px;
width: 80px;
height: 80px;
background-color: lime;
display: flex;
justify-content: center;
opacity: 1;
animation: emerge 6s forwards infinite;
}
@keyframes emerge {
0% {
opacity: 0;
}
50%{
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes disappear {
100% {
opacity: 0;
}
}
.text {
font-size: 36px;
width: 100%
height: auto;
z-index: 2;
}
.observed {
position: absolute;
width: 100%;
height: 10%;
bottom: 0;
} <div class="a-container">
<div class ="an-outer-box">
<div class="an-inner-box"></div>
</div>
<div class="text">
lots of text here coweoicnwe coinc weocw own oefn won fon ofnwofimc oewncoe fnewo now nfowc ocroorfn rockm km erocn on orcnorcnorc rocn ron o gnfn rovnreo rno rcn orfn ro nvonero nro n on ornfa ovm orn qornv ofnr ofrn owrenv eorfnqw vpofnv on oerfnq ocn orinq3ponow nvr vornv orfn qwonq onw oervn ov n wofn rogne og nqogn nrowro nvo rghq3orp irogn qrovn qrvnr wovnro gnq3r orvn rvnr oanv owrvnqw ropnrq ogring aowrnv ovn reognr gon own ownv eorvnq orwn owrnworn aovnefovenr orp nvero vneov nefon qeovnerov n gpwnvan;va rvoiaernv ae;fvn erov ner;vn s;v narinovrng 3orn veovn g[ 3q]g jap q30v eoi rogh0[ n3om iq3v30530qvmv[pq rhm350[5m haq3 3i 4m q0[4gm q30m q3ivmq3p gmq3 [vm35gq3m50vqm [3m q30 q50[g 350 mq[g m30[ m 5054vq35035q[0h ]3q 3vq3[q35g9jq35]- 3 vm350gj35[ y9v 50[5ivmq 3-gj 3]-t9 3]mq35 -[g9 jq353pgq3]-rm q3-m3 [q3mq3 q35m-[yj q35y]]]]]]]]]]]
lots of text here coweoicnwe coinc weocw own oefn won fon ofnwofimc oewncoe fnewo now nfowc ocroorfn rockm km erocn on orcnorcnorc rocn ron o gnfn rovnreo rno rcn orfn ro nvonero nro n on ornfa ovm orn qornv ofnr ofrn owrenv eorfnqw vpofnv on oerfnq ocn orinq3ponow nvr vornv orfn qwonq onw oervn ov n wofn rogne og nqogn nrowro nvo rghq3orp irogn qrovn qrvnr wovnro gnq3r orvn rvnr oanv owrvnqw ropnrq ogring aowrnv ovn reognr gon own ownv eorvnq orwn owrnworn aovnefovenr orp nvero vneov nefon qeovnerov n gpwnvan;va rvoiaernv ae;fvn erov ner;vn s;v narinovrng 3orn veovn g[ 3q]g jap q30v eoi rogh0[ n3om iq3v30530qvmv[pq rhm350[5m haq3 3i 4m q0[4gm q30m q3ivmq3p gmq3 [vm35gq3m50vqm [3m q30 q50[g 350 mq[g m30[ m 5054vq35035q[0h ]3q 3vq3[q35g9jq35]- 3 vm350gj35[ y9v 50[5ivmq 3-gj 3]-t9 3]mq35 -[g9 jq353pgq3]-rm q3-m3 [q3mq3 q35m-[yj q35y]]]]]]]]]]]
lots of text here coweoicnwe coinc weocw own oefn won fon ofnwofimc oewncoe fnewo now nfowc ocroorfn rockm km erocn on orcnorcnorc rocn ron o gnfn rovnreo rno rcn orfn ro nvonero nro n on ornfa ovm orn qornv ofnr ofrn owrenv eorfnqw vpofnv on oerfnq ocn orinq3ponow nvr vornv orfn qwonq onw oervn ov n wofn rogne og nqogn nrowro nvo rghq3orp irogn qrovn qrvnr wovnro gnq3r orvn rvnr oanv owrvnqw ropnrq ogring aowrnv ovn reognr gon own ownv eorvnq orwn owrnworn aovnefovenr orp nvero vneov nefon qeovnerov n gpwnvan;va rvoiaernv ae;fvn erov ner;vn s;v narinovrng 3orn veovn g[ 3q]g jap q30v eoi rogh0[ n3om iq3v30530qvmv[pq rhm350[5m haq3 3i 4m q0[4gm q30m q3ivmq3p gmq3 [vm35gq3m50vqm [3m q30 q50[g 350 mq[g m30[ m 5054vq35035q[0h ]3q 3vq3[q35g9jq35]- 3 vm350gj35[ y9v 50[5ivmq 3-gj 3]-t9 3]mq35 -[g9 jq353pgq3]-rm q3-m3 [q3mq3 q35m-[yj q35y]]]]]]]]]]]
</div>
<div class="observed"></div>
</div> Комментарии:
1. Спасибо за ваше предложение. Я много читал о наблюдателях пересечений и подозреваю, что вы правы. Я не смог заставить их работать на меня в других анимациях, где я пытался их использовать. Вот созданное мной перо, которое является приближением к тому, что я пытаюсь сделать. codepen.io/ehbehr/pen/yLVNwEj Сценарий написан Ником Силиаком ( Nick Ciliak ) . codepen.io/nickcil/pen/sfutl и модифицированный мной, чтобы быть факсимиле того, что вы хотите сделать. Код не работал с самой анимацией, поэтому я поместил его в родительский div, который был бы прозрачным в реальной жизни.
2. Можно ли добавить немного HTML? Если мы поместим абсолютно позиционированный div внизу с высотой 10%, мы, возможно, могли бы наблюдать, как он входит и выходит из окна просмотра.
3. Я рискнул и разместил фрагмент, который вводит обратный вызов на нижних 10%, входящих или выходящих из области просмотра.
4. вау. спасибо. Я вижу, что это работает во фрагменте, как вы описываете. Любопытно, что когда я комментирую свои собственные html и css и заменяю все это вашими, в моем pen ничего не регистрируется в консоли. Кроме того, я не уверен в том, как переводятся ваши утверждения if / else. Ваше «if» говорит «сделай что-нибудь», а ваше «else» говорит «сделай что-нибудь другое», тогда как в моем случае «if» (не внизу) говорит «не скрывайте анимацию (или ее div)», а мое «else» — «скрыть анимацию (или ее div)», а не «скрыть или показать что-то еще». Как при использовании одного и того же имени анимации для обоих условий будут получены противоположные результаты?
5. Наши if / else, вероятно, просто противоположны друг другу. JS возвращает true, когда div отображается (т. Е. Входит в область просмотра), и поэтому код, который вам нужно вставить в if, — это то, что вы хотите сделать, когда вы прокручиваете вниз почти до самого низа, а else — это, ну, код, который вы хотите сделать, когда вы не находитесь в нижней части. Вы хотите поделиться своим codepen, поскольку я не понимаю, почему вы не получаете журналы консоли.
Ответ №2:
Так что, возможно, это не идеальное решение, но библиотека путевых точек позволяет вам вставлять путевую точку в ваш код, поэтому, когда вы прокручиваете ее, она запускает функцию. По умолчанию он находится в верхней части окна, но принимает параметр смещения, который может быть в процентах. Используя это, вы можете сделать так, чтобы функция вызывалась при прокрутке 90%.