在文本上显示元素 - html,css,js

Question

我想在文本上重叠一个 ScrollMagic animation，而不是让 animation 成为一个单独的部分，就像它在这里一样：

那里应该有文本，但它使这个 animation 成为文本位于底部的新部分。

代码：

 gsap.registerPlugin(MotionPathPlugin); const tween = gsap.timeline(); tween.to(".paper-plane", { duration: 1, ease: "power1.inOut", motionPath: { path: [ {x: 100, y: 0}, {x: 300, y: 10}, {x: 500, y: 100}, {x: 750, y: -100}, {x: 350, y: -50}, {x: 600, y: 100}, {x: 800, y: 0}, {x: window.innerWidth, y: -250} ], curviness: 2, autoRotate: true } }); const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: '.animation', duration: 1000, triggerHook: 0 }).setTween(tween).setPin('.animation').addTo(controller);

 *{ margin: 0; padding: 0; box-sizing: border-box; } header, footer{ height: 100vh; display: flex; justify-content: center; align-items: center; font-family: "Montserrat", sans-serif; } header h1{ font-size: 60px; }.animation{ height: 100vh; position: relative; overflow: hidden; }.paper-plane{ position: absolute; top: 50%; left: 0%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> <div class="animation"> <img class="paper-plane" src="https://i.postimg.cc/W1w9dT1x/paper.png" alt="Paper Plane"> </div>

我需要添加什么到我的css以便 animation 显示在文本顶部，我没有提供我的文本的代码，因为它通常可以是任何文本。 我只希望这个 animation 能够处理文本，并且没有自己的单独部分。 有什么建议么？

Answer 1

您需要将显示设置为绝对

 gsap.registerPlugin(MotionPathPlugin); const tween = gsap.timeline(); tween.to(".paper-plane", { duration: 1, ease: "power1.inOut", motionPath: { path: [{ x: 100, y: 0 }, { x: 300, y: 10 }, { x: 500, y: 100 }, { x: 750, y: -100 }, { x: 350, y: -50 }, { x: 600, y: 100 }, { x: 800, y: 0 }, { x: window.innerWidth, y: -250 } ], curviness: 2, autoRotate: true } }); const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: '.animation', duration: 1000, triggerHook: 0 }).setTween(tween).setPin('.animation').addTo(controller)

 * { margin: 0; padding: 0; box-sizing: border-box; } header, footer { height: 100vh; display: flex; justify-content: center; align-items: center; font-family: "Montserrat", sans-serif; } header h1 { font-size: 60px; }.animation { width: 100%; height: 800px; position: absolute; overflow: hidden; }.paper-plane { position: absolute; top: 0; left: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> <div class="animation"> <img class="paper-plane" src="https://i.postimg.cc/W1w9dT1x/paper.png" alt="Paper Plane"> </div> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et ultrices neque ornare aenean. Tortor dignissim convallis aenean et tortor at risus. Ullamcorper eget nulla facilisi etiam dignissim diam. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Vitae auctor eu augue ut lectus arcu. Dui nunc mattis enim ut. Tempor orci eu lobortis elementum nibh tellus molestie nunc non. Vel turpis nunc eget lorem dolor sed. A lacus vestibulum sed arcu non odio euismod lacinia. Eget mi proin sed libero enim sed faucibus turpis in. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Sed ullamcorper morbi tincidunt ornare massa. Eu feugiat pretium nibh ipsum. Vitae elementum curabitur vitae nunc sed. Vitae auctor eu augue ut lectus arcu. Mattis nunc sed blandit libero. In ante metus dictum at tempor commodo ullamcorper a. Mus mauris vitae ultricies leo integer malesuada nunc vel risus. Vivamus at augue eget arcu dictum varius. Faucibus ornare suspendisse sed nisi lacus sed viverra. Pellentesque dignissim enim sit amet. A diam sollicitudin tempor id eu nisl nunc. Lobortis elementum nibh tellus molestie nunc non blandit massa. Et netus et malesuada fames ac turpis egestas integer. Vivamus at augue eget arcu dictum varius duis. Ut sem nulla pharetra diam sit amet. Ipsum dolor sit amet consectetur adipiscing elit. Urna id volutpat lacus laoreet non. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Amet nulla facilisi morbi tempus iaculis. Nullam vehicula ipsum a arcu cursus. Suspendisse sed nisi lacus sed. Tristique risus nec feugiat in fermentum posuere urna nec. In hac habitasse platea dictumst quisque sagittis. Nam at lectus urna duis convallis convallis tellus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Orci sagittis eu volutpat odio. Magna eget est lorem ipsum dolor sit amet consectetur. </div>