s24344,
не могу понять что вам нужно, так?
<!DOCTYPE html><html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<style class="cp-pen-styles">.app__content {
padding: 200px 0;
}
.anime__section {
display: flex;
justify-content: flex-end;
}
.anime__large {
position: relative;
width: 705px;
height: 694px;
background: #61bfad;
}
.anime__small {
width: 250px;
height: 250px;
background: #055a5b;
position: absolute;
bottom: -125px;
left: -125px;
}
</style></head><body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="parallax-app" data-component="parallax">
<section class="anime__section">
<div class="anime__large">
<div class="anime__small hero__bg" data-hero-bg="hero-bg"></div>
</div>
</section>
<section class="app__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, asperiores assumenda vel itaque
cumque
eveniet adipisci, laboriosam nulla ipsum ea, mollitia fugit minima natus amet! Deleniti recusandae nam
reprehenderit atque?
</p>
</section>
<section>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, asperiores assumenda vel itaque
cumque
eveniet adipisci, laboriosam nulla ipsum ea, mollitia fugit minima natus amet! Deleniti recusandae nam
reprehenderit atque?
</p>
</section>
<section class="anime__section">
<div class="anime__large">
<div class="anime__small" data-hero-bg="hero-bg"></div>
</div>
</section>
<section class="app__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, asperiores assumenda vel itaque
cumque
eveniet adipisci, laboriosam nulla ipsum ea, mollitia fugit minima natus amet! Deleniti recusandae nam
reprehenderit atque?
</p>
</section>
<section class="app__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, asperiores assumenda vel itaque
cumque
eveniet adipisci, laboriosam nulla ipsum ea, mollitia fugit minima natus amet! Deleniti recusandae nam
reprehenderit atque?
</p>
</section>
<section class="app__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, asperiores assumenda vel itaque
cumque
eveniet adipisci, laboriosam nulla ipsum ea, mollitia fugit minima natus amet! Deleniti recusandae nam
reprehenderit atque?
</p>
</section>
<section>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, asperiores assumenda vel itaque
cumque
eveniet adipisci, laboriosam nulla ipsum ea, mollitia fugit minima natus amet! Deleniti recusandae nam
reprehenderit atque?
</p>
</section>
<section class="anime__section">
<div class="anime__large">
<div class="anime__small" data-hero-bg="hero-bg"></div>
</div>
</section>
<section class="app__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, asperiores assumenda vel itaque
cumque
eveniet adipisci, laboriosam nulla ipsum ea, mollitia fugit minima natus amet! Deleniti recusandae nam
reprehenderit atque?
</p>
</section>
<section class="app__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, asperiores assumenda vel itaque
cumque
eveniet adipisci, laboriosam nulla ipsum ea, mollitia fugit minima natus amet! Deleniti recusandae nam
reprehenderit atque?
</p>
</section>
<section class="anime__section">
<div class="anime__large">
<div class="anime__small" data-hero-bg="hero-bg"></div>
</div>
</section>
<section class="app__content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, asperiores assumenda vel itaque
cumque
eveniet adipisci, laboriosam nulla ipsum ea, mollitia fugit minima natus amet! Deleniti recusandae nam
reprehenderit atque?
</p>
</section>
</div>
</body>
</html>
<script >class AppParallax {
constructor(el) {
this.el = el;
this.strafeAmount = 190;
this.heroBg = [...this.el.querySelectorAll('[data-hero-bg="hero-bg"]')];
this.move = this.move.bind(this);
this.init();
}
init() {
window.addEventListener('scroll', this.move);
}
checkViewport(el) {
var rect = el.getBoundingClientRect();
var y = rect.top ;
return rect.top < innerHeight && rect.top > -innerHeight ? rect.top/innerHeight : 0
}
move() {
this.heroBg.forEach((item, i) => {
let parent = item.parentNode;
let y = this.checkViewport(parent);
let strafe = y * this.strafeAmount + '%';
let transformString = 'translateY('+strafe+')';
if(y){
item.style.transform = transformString;
item.style.webkitTransform = transformString;
}
});
}}
const appParallax = new AppParallax(
document.querySelector('[data-component="parallax"]'));
</script>
</body></html>