parallax 相关问题

我试图实现滚动时在图像上覆盖文本容器的效果，以便图像始终保持垂直居中。我设法做了这样的事情：我试图实现滚动时在图像上覆盖文本容器的效果，以便图像始终保持垂直居中。我设法做了这样的事情： <style> [data-parallax="container"] { height: 100vh; overflow-y: auto; overflow-x: hidden; perspective: 300px; perspective-origin: top; } [data-parallax="group"] { height: 80vh; position: relative; transform-style: preserve-3d; } [data-parallax="layer"] { transform-origin: top; height: 80vh; } .coverImg { background-image: url("https://aepicos.com/codepen/images/black-widow.png"); background-size: contain; background-repeat: no-repeat; background-position: top center; } [data-parallax-speed="slow"] { transform: translateZ(-300px) scale(calc((1 + (-300 /* translateZ */ * -1) / 300 /* perspective */))); } .content { position: relative; transform: translateZ(0); } </style> <div data-parallax="container"> <div data-parallax="group"> <div data-parallax="layer" data-parallax-speed="slow" class="coverImg"></div> </div> <div class="content" style="border: 1px solid black"> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> </div> </div> codepen：https://codepen.io/Marcin-Brodnicki/pen/ExBGQVq 但是我对文本容器下方剩余的空白区域有疑问。我该如何解决这个问题？我想控制图像最大高度。在全页视图中尝试此操作 * { padding: 0; margin: 0; box-sizing: border-box; } .main { height: 100vh; background-image: url("https://aepicos.com/codepen/images/black-widow.png"); object-fit: contain; background-repeat: no-repeat; background-position: center; background-attachment: fixed; overflow-y: auto; } .main .content { background-color: #fff; margin-top: 50%; } <main className="main"> <div className="content"> <h1>Natasha Romanoff</h1> <p> Natalia Alianovna Romanoff, more commonly known as Natasha Romanoff, is a fictional character primarily portrayed by Scarlett Johansson in the Marvel Cinematic Universe (MCU) media franchise—based on the Marvel Comics character of the same name—sometimes known by her alias, Black Widow. Romanoff is depicted as an expert spy and hand-to-hand combatant, trained in the Red Room from childhood to be a KGB assassin. This brought her under S.H.I.E.L.D. radar, and Clint Barton was sent to kill her but instead spared her life and recruited her into the organization. When Nick Fury activates the Avengers Initiative, she becomes a founding member. Following the fallout related to the Sokovia Accords, Romanoff became a fugitive and eventually reunited with her adopted family, including sister Yelena Belova. They worked together to destroy General Dreykov Black Widow program. After Thanos erases half of all life, Romanoff leads the Avengers for five years until she sacrifices herself to obtain the Soul Stone, successfully helping the Avengers restore trillions of lives across the universe. Romanoff was introduced in Iron Man 2 (2010) and became a central MCU character, appearing in nine films, including her final live-action appearance in Black Widow (2021).[5] Johanssons portrayal of Romanoff was met with positive reception. Alternate versions of the character appear in the animated series What If...? (2021), voiced by Lake Bell. These versions include an incarnation of Romanoff, who sees her world decimated by an alternate version of Ultron, eventually resulting in her being recruited into the Guardians of the Multiverse by the Watcher.[6] </p> </div> </main>

html css parallax pure-css-parallax

回答 1 投票 0

纯CSS透视视差效果仅适用于Firefox，不适用于Chrome或Safari

我尝试制作一个网页，背景滚动速度比文本内容慢一点，给人一种 3D 场景的错觉，但我的方法只适用于 Firefox。在 chrome 和 safari 上任何变换属性...

html css cross-browser parallax pure-css-parallax

回答 1 投票 0

真实元素边框和gsap标记之间的区别

我使用 GSAP ScrollTrigger 制作图像的垂直滑块。这个想法是， id=scroller 的隐藏元素需要一定的高度（我选择它为 400 vh），而所有内容都在...

javascript animation parallax gsap scrolltrigger

回答 1 投票 0

我的透明png在网页上显示为白色背景

我一直在构建一个视差网页。当我将前景图像滚动到背景图像上时，png 具有白色背景，而不是预期的透明背景。我使用 Bootstrap 是为了...