parallax 相关问题

当从不同位置观看时导致物体的位置或方向看起来改变的效果,例如通过取景器和相机的镜头

根据视口稍微向上或向下移动 div

我要实现一个单页设计,它看起来就像一本杂志的几页剪纸,垂直放置并彼此稍微重叠。他们的顶部有一些磨损和洞,尊重......

回答 2 投票 0

视差增强功能链接和我不知道吗?

j'ai fait un front-end rien de spécial il y'a que le et des éléments dans qui ont une petite Animation lors duscroll et j'ai tout Mis dans la fonction app(), mais si j'enlève留置权代码

回答 1 投票 0

如何通过滚动时移动背景图像层来创建 3D 幻觉(视差效果)?

我在标题中将两个图像堆叠在一起。当用户滚动时,我的目标是在背景图像中创建微妙的垂直移动,以实现 3D 幻觉。两张图片都有...

回答 1 投票 0

如果父级隐藏溢出,为什么 tranlateZ() 属性不起作用

我正在尝试在应用透视并保留 3-d 后应用translateZ 但没有应用在我的容器上; 这是 HTML 代码 我尝试在应用透视并保留 3-d 后应用translateZ 但没有应用在我的容器上; 这是 HTML 代码 <div class="wrapper"> <div class="container"> <div class="box"> </div> </div> </div> 这是CSS .wrapper { height: 100vw; width: 100vh; perspective: 10px; } .container { width: 80%; height: 79%; transform-style: preserve-3d; overflow:hidden; } .box{ height: 40%; width:30%; margin:20px; background-color: green; transform:translateZ(-33px); } 注释溢出属性后, tranlateZ 工作正常 如果我尝试使用溢出-x 或溢出-y,也会出现同样的问题; 为什么会出现这种情况。 有什么办法解决吗? 您必须将视角移动到 .container 元素。使用overflow: hidden可以防止透视效果的“传播” .wrapper { height: 100vw; width: 100vh; } .container { width: 80%; height: 79%; transform-style: preserve-3d; overflow:hidden; perspective: 10px; } .box{ height: 40%; width:30%; margin:20px; background-color: green; transform:translateZ(-33px); } <div class="wrapper"> <div class="container"> <div class="box"> </div> </div> </div> 您面临的问题与溢出属性有关。当您在.container元素上设置overflow:hidden时,它会创建一个新的堆叠上下文,这会影响translateZ属性应用于其子元素的方式。 当您使用overflow:hidden时,.container元素将成为其子元素的新容器,并且translateZ将相对于该新容器的位置应用。这可能会导致 3D 转换出现意外行为。 要解决此问题,您可以将溢出:隐藏属性应用于包装元素而不是 .container 元素。

回答 2 投票 0

横竖混合滚动

你好,我的网站遇到了一个问题,我希望用户通常垂直滚动,但是当他到达那个特定的容器时,它会水平滚动,直到容器在我的水平线上……

回答 0 投票 0

滚动后如何在 collectionView 单元格中居中微调样式的卡片视图?

我有一个像视差一样滚动的 collectionView,但它的活动可见单元格位于上一个和下一个单元格的顶部。但是,问题是当我从第一个单元格(黑色)向左/向右滚动时

回答 1 投票 0

对象实例化不按预期方式工作

我正在开发一个无限滚动条,其中玩家和相机是静止的,而平台和背景向它们移动。一旦一个物体第一次进入相机,它就会产生……

回答 0 投票 0

如何让我的视差着陆页响应?

我正在创建我的网站,但我是网络开发的新手。 我按照下面的 youtube 教程创建了一个视差登陆页面,但我无法让我的网站响应...一切都扭曲了,我...

回答 1 投票 0

应用了 translateZ 的英雄元素在 Chromium 浏览器上向右倾斜,但在 Firefox 上不会。我该如何解决?

所以,我想通过让英雄部分滚动得更慢来制作视差滚动效果。所以我对包装器应用了透视和变换样式,也对英雄应用了 translateZ 和 scale,就像在...

回答 0 投票 0

如何让多个视差图像在 iOS 上工作

我很难尝试让多个视差图像在 iOS 上为这个网站工作。我知道 background-attachment: fixed 不会在 iOS 中呈现所以我尝试了这里的示例和

回答 1 投票 0

Bootstrap 中的视差问题

我在 bootstrap 中用 JavaScript 写了一段代码,它可以工作。问题是右侧的空格键不会停在网页的末尾并且图像不适应屏幕o...

回答 0 投票 0

将 Vanilla JS 转换为 React

我是 React 的新手。我正在尝试将我的 vanilla js 视差效果转换为反应但我收到此错误“TypeError:无法设置未定义的属性(设置'top')”。 这是我的

回答 1 投票 0

CSS 更改滚动条上固定标题的背景颜色

是否有一种纯 CSS 技术可以在用户向上滚动页面后更改固定菜单栏的背景颜色? 颜色从银色变为金色的示例: https://codepen.io/dpilafia...

回答 3 投票 0

视差滚动像 KPRVerse

所以我想做一个 https://kprverse.com/ 风格的网站,但我不知道如何滚动。 有人能解释一下他们在这个网站上使用的这种效果吗,谢谢。 我尝试了一些...

回答 0 投票 0

带有 translatez 图像溢出容器的 Css 视差

我正在尝试实现类似于背景附件的视差效果:已修复。如果只有第一个元素有 translateZ,一切正常,但如果 2 个或更多部分有 translateZ 属性

回答 0 投票 0

如何创建视差滚动效果,其中一个 div 在第三个(倾斜的)div 中滚动到另一个 div 上?

我在 https://brio.ruhangupta.com 上有一个项目,我有一个可滚动的部分,其中有两个 div 在倾斜的 div 中。我想在滚动上做一个视差效果,第二个蓝色 div 在...上有视差

回答 0 投票 0

如何给html的'img'标签提供视差效果,而不是在背景中。

这可能是一个常见的问题,很多人也会问这个问题。但是我还没有找到适合我的解决方案。是否有可能在html'img'标签中给出视差效果,而不是......

回答 1 投票 1

使用UIMotionEffect的视差效果无法使用

我的UIView的视差效果完全不起作用。我需要一些像iPhone倾斜的移动背景图像(伪3D).let horizontalMotionEffect = UIInterpolatingMotionEffect(keyPath: "...

回答 1 投票 1

如何用React使用Rellax.js?

我正试图用React使用Rellax.js,但无法理解如何使用它。我所能找到的是https:/www.npmjs.compackagerellax#target-node。在那个链接中,他们给出了这个代码。

回答 1 投票 1

折叠工具栏不能钉住卡片视图

我创建了一个XML,其中包含appbar布局、带imageeview的折叠工具栏布局和嵌套滚动视图,以便预先实现视差滚动。然而,我想在里面添加一个carview ...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.