Горизонтальное смещение при скролле
const cont = document.querySelector(".js-parallax");
class parallax {
constructor(container) {
this.target = container.querySelector('.js-clients-list');
this.sections = this.target.offsetHeight;
this.header = document.querySelector('.js-header');
this.headerHeight = this.header.offsetHeight;
this.init();
}
init() {
document.addEventListener('scroll', this.initScroll.bind(this));
document.addEventListener('load', this.move.bind(this));
}
initScroll() {
const offsetTop = this.target.parentElement.offsetTop;
const offsetHeight = this.target.parentElement.offsetHeight;
if (window.scrollY > (offsetTop - this.headerHeight - 50)) {
return;
} else if ((window.scrollY + window.innerHeight) > (offsetTop + offsetHeight)) {
this.move();
} else {
this.reset();
}
}
move() {
const offsetTop = this.target.parentElement.offsetTop - 50;
const scrolled = (offsetTop - this.headerHeight) - window.scrollY;
const pixels = window.innerHeight - this.headerHeight;
const scrollWidth = this.target.scrollWidth - this.target.offsetWidth;
const step = scrollWidth / pixels;
const translate = (scrolled * step - scrollWidth);
this.target.style.transform = `translateX(${translate}px)`;
}
reset() {
this.target.style.transform = `translateX(0px)`;
}
}
let Parallax = new parallax(document.querySelector(".js-parallax"))
.hero {
height: 100vh;
width: 100%;
background: lightblue;
}
.another_section {
height: 2500px;
width: 100%;
background: lightblue;
}
header {
width: 100%;
height: 70px;
background: tomato;
position: fixed;
z-index: 10;
}
.container {
width: 100%;
margin: 0 auto;
padding-left: 2.5rem;
padding-right: 2.5rem;
max-width: 50rem;
}
.section {
height: 200px;
background: lightgray;
position: relative;
overflow: hidden;
}
.section__list {
position: relative;
padding: 0;
margin: 0 auto;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(0%);
transition: all 0.1s ease;
}
.section__item {
height: 50px;
width: 120px;
background: #000;
margin-left: 5%;
}
.section__item:first-child {
margin-left: 0;
}
<header class="js-header"></header>
<div class="hero"></div>
<div class="container">
<div class="section js-clients js-parallax">
<ul class="section__list js-clients-list">
<li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
<li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
<li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
<li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
<li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
<li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
<li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
<li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
<li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
<li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
<li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
</ul>
</div>
</div>
<div class="another_section"></div>
Не могу сделать смещение при старте плавной, как только блок находится в области видимсоти он сразу начинает ездить, это хорошо. Но при самом начале если сместить скролл вниз и потом начать назад вести, то смещение прыгает. Сразу подставляется смещенное значение, пока не могу разобраться как это исправить, ведь надо что бы оно начинало смещать с 0. Помогите пожалуйста разобраться!
`https://codepen.io/eeerrvgfghyjhj/pen/ExWPMqw`