Si observa la imagen adjunta, puede ver una imagen de una persona y luego un espacio en blanco con un radio de borde. Quería saber si hay alguna manera de que, mientras se desplaza hacia abajo por el espacio en blanco, se desborde la imagen y, mientras se desplaza hacia arriba, se vuelva a mostrar la imagen. Estoy buscando codificar esto usando HTML, CSS y JS. Este podría ser un ejemplo de lo que estoy tratando de hacer: ejemplo
<div class="description panel blue"> <div><h1>Layered pinning</h1> <p>Use pinning to layer panels on top of each other as you scroll.</p> <div class="scroll-down">Scroll down<div class="arrow"></div></div> </div> </div> <section class="panel red"> ONE </section> <section class="panel orange"> TWO </section> <section class="panel purple"> THREE </section> <section class="panel green"> FOUR </section> <header> <a href="https://greensock.com/scrolltrigger"> <img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" /> </a> </header>JS:
gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray(".panel").forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: "top top", pin: true, pinSpacing: false }); }); ScrollTrigger.create({ snap: 1 / 4 // snap whole page to the closest section! });