网页动效怎么做？先来亲手试一次吧。

                      .stage { position: relative; overflow: hidden; }.art { display: block; width: 100%; height: 100%; }
                    
                      .art { clip-path: inset(calc((1 - var(--p)) * 50%)); }
                    
                      function render(p) {  track.style.setProperty('--p', p);  showProgress(p);}
                    
                      frame = requestAnimationFrame(() => {  frame = 0;  if (track.classList.contains('scroll-mode')) {    render(Math.max(0, Math.min(1, (scrollY - start) / distance)));  }});
                    
                      range.addEventListener('input', () => {  manual = Number(range.value) / 100;  render(manual);});
                    

                      gsap.registerPlugin(ScrollTrigger);const tween = gsap.timeline({ paused: true });
                    
                      tween.fromTo('.art', { clipPath: 'inset(50%)' },  { clipPath: 'inset(0%)', ease: 'none' });
                    
                      function render(p) {  tween.progress(p);  showProgress(p);}
                    
                      trigger = ScrollTrigger.create({  trigger: track,  start: 'top top',  end: () => '+=' + (track.offsetHeight - sticky.offsetHeight),  animation: tween,  scrub: true,});
                    
                      range.addEventListener('input', () => {  manual = Number(range.value) / 100;  render(manual);});