const sections = document.querySelectorAll('section');
gsap.registerPlugin(ScrollTrigger);
sections.forEach(section => {
gsap.fromTo(section, {
backgroundPositionY: `-${window.innerHeight / 2}px`
}, { backgroundPositionY: `${window.innerHeight / 2}px`,
ease: 'none',
scrollTrigger: {
trigger: section,
scrub: true
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<style>
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 第一个section */
section{
background-size: cover;
background-position: center;
height: 600px;
display: flex;
text-align: center;
}
section:nth-child(1){
background-image: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&w=600");
}
section:nth-child(2){
background-image: url("https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
}
section:nth-child(3){
background-image: url("https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&w=600");
}
section:nth-child(4){
background-image: url("https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&w=600");
}
section:nth-child(5){
background-image: url("https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&w=600");
}
section:nth-child(6){
background-image: url("https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
}
section:nth-child(7){
background-image: url(" https://images.pexels.com/photos/220182/pexels-photo-220182.jpeg?auto=compress&cs=tinysrgb&w=600");
}
section:nth-child(8){
background-image: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&w=600");
}
section:nth-child(9){
background-image: url(" https://images.pexels.com/photos/220182/pexels-photo-220182.jpeg?auto=compress&cs=tinysrgb&w=600");
}
section:nth-child(10){
background-image: url("https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
}
h1{
font-size: 120px;
margin: auto;
color: rgb(207, 23, 23);
}
</style>
<body>
<section>
<h1>1</h1>
</section>
<section>
<h1>2</h1>
</section>
<section>
<h1>3</h1>
</section>
<section>
<h1>4</h1>
</section>
<section>
<h1>5</h1>
</section>
<section>
<h1>6</h1>
</section>
<section>
<h1>7</h1>
</section>
<section>
<h1>8</h1>
</section>
<section>
<h1>9</h1>
</section>
<section>
<h1>10</h1>
</section>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script src="./demo.js"></script>
</body>
</html>