html视差滚动效果
借助gsap效果去实现的
gsap官网
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gsap视差滚动</title><style>body {padding: 0 0;margin: 0 0;}section {display: flex;flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 100vh;}h1 {color: #ffffff;font-size: 65px;display: flex;flex-direction: column;justify-content: center;align-items: center;/* text-stroke: 2px #000;-webkit-text-stroke: 2px #000; */mix-blend-mode: difference;}section:nth-child(1) {background: url('./img/1.jpg')no-repeat center;}section:nth-child(2) {background: url('./img/2.jpg')no-repeat center;}section:nth-child(3) {background: url('./img/3.jpg')no-repeat center;}section:nth-child(4) {background: url('./img/4.jpg')no-repeat center;}section:nth-child(5) {background: url('./img/5.jpg')no-repeat center;}section:nth-child(6) {background: url('./img/6.jpg')no-repeat center;}section:nth-child(7) {background: url('./img/7.jpg')no-repeat center;}section:nth-child(8) {background: url('./img/9.jpg')no-repeat center;}section:nth-child(9) {background: url('./img/9.jpg')no-repeat center;}section:nth-child(10) {background: url('./img/10.jpg')no-repeat center;}section:nth-child(11) {background: url('./img/11.jpg')no-repeat center;}section:nth-child(12) {background: url('./img/12.jpg')no-repeat center;}</style>
</head><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><section><h1>展示文字11</h1></section><section><h1>展示文字12</h1></section>
</body></html><!-- <script src="./gsap-latest-beta.min.js"></script>
<script src="./ScrollTrigger.min.js"></script> --><script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>
<script>const section = document.querySelectorAll('section');//注册GSAP的ScrollTrigger插件的代码。在使用ScrollTrigger之前，必须先使用该代码进行注册以确保插件的正常使用。gsap.registerPlugin(ScrollTrigger);section.forEach(section => {gsap.fromTo(section, {backgroundPositionY: `-${window.innerHeight / 2}px`}, {backgroundPositionY: `${window.innerHeight / 2}px`,// duration:3,ease: 'none',scrollTrigger: {trigger: section,scrub: true,}})})//gsap.fromTo() -可以定义起始值和结束值。
</script>
