Мне нужно выводить элементы в определённом порядке:
Когда пользователь проматывает до определённого места, скрипт активирует анимацию через добавление класса, анимация должна делать элементы непрозрачными в определённой последовательности. Класс в js добавляется, но opacity как был 0 так и остался. Вот код:
HTML:
<div class="score_line">
<div class="left_titles">
<div class="left_title l0"><span class="year">2016—2018</span><span class="company">freelance</span><span class="position">web-developer</span><span class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim, laborum, quidem alias facilis assumenda dolor hic distinctio optio modi aliquid blanditiis animi reiciendis ullam sequi magnam eos aperiam, quia ab.</span></div>
<div class="left_title l1"><span class="year">2016—2018</span><span class="company">freelance</span><span class="position">web-developer</span><span class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim, laborum, quidem alias facilis assumenda dolor hic distinctio optio modi aliquid blanditiis animi reiciendis ullam sequi magnam eos aperiam, quia ab.</span></div>
<div class="left_title l2"><span class="year">2016—2018</span><span class="company">freelance</span><span class="position">web-developer</span><span class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim, laborum, quidem alias facilis assumenda dolor hic distinctio optio modi aliquid blanditiis animi reiciendis ullam sequi magnam eos aperiam, quia ab.</span></div>
</div>
<div class="centr_line">
<div class="coolGrLine">
<div class="gr_dot g0"></div>
<div class="gr_dot g1"></div>
<div class="gr_dot g2"></div>
<div class="gr_dot g3"></div>
<div class="gr_dot g4"></div>
<div class="gr_dot g5"></div>
</div>
</div>
<div class="right_titles">
<div class="right_title r0"><span class="year">2016—2018</span><span class="company">freelance</span><span class="position">web-developer</span><span class="content c_right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim, laborum, quidem alias facilis assumenda dolor hic distinctio optio modi aliquid blanditiis animi reiciendis ullam sequi magnam eos aperiam, quia ab.</span></div>
<div class="right_title r1"><span class="year">2016—2018</span><span class="company">freelance</span><span class="position">web-developer</span><span class="content c_right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim, laborum, quidem alias facilis assumenda dolor hic distinctio optio modi aliquid blanditiis animi reiciendis ullam sequi magnam eos aperiam, quia ab.</span></div>
<div class="right_title r2"><span class="year">2016—2018</span><span class="company">freelance</span><span class="position">web-developer</span><span class="content c_right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim, laborum, quidem alias facilis assumenda dolor hic distinctio optio modi aliquid blanditiis animi reiciendis ullam sequi magnam eos aperiam, quia ab.</span></div>
</div>
</div>
CSS:
.score_line{
transition: all 1.5s ease-in-out;
margin-top: 54px;
display: grid;
grid-template-columns: 5fr 3fr 5fr;
height: 1170px;
width: 1362px;
.left_title, .right_title{
color: white;
height: 195px;
display: flex;
opacity: 0.3;
flex-direction: column;
justify-content: center;
}
.left_title{
align-items: flex-end;
margin-top: 195px;
}
.right_title{
margin-bottom: 195px;
align-items: flex-start;
}
}
.score_line.animate{
.r0{
opacity: .5;
}
.l0{
opacity: 1;
transition-delay: 2000ms;
}
.r1{
opacity: 1;
transition-delay: 4000ms;
}
.l1{
opacity: 1;
transition-delay: 6000ms;
}
.r2{
transition-delay: 8000ms;
opacity: 1;
}
.l2{
transition-delay: 10000ms;
opacity: 1;
}
}
JS:
setInterval(function(){
if(( window.pageYOffset >= 2380) && (second == true)){
document.querySelector('.score_line').classList.add('animate')
second = false
}
},100)
Простой
