parallax 相关问题

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

React Native:通过 ScrollView 将触摸事件传递到 z 平面下方的元素

我正在尝试编写一个视差元素,该元素具有多个以不同速率滚动的窗格。 为了实现这一点,我有多个视图绝对定位并堆叠在 z 平面上,并带有 Scroll...

回答 2 投票 0

相对于滚动淡入固定页脚

我找到了几种不同的方法来做到这一点,但如果有人知道我可以做到这一点的方法,我很感兴趣,这对滚动位置更加敏感。 我正在尝试创建视差效果并淡化固定 f...

回答 1 投票 0

“已修复”导航栏但消失了

我(深深地..)遇到了导航栏的问题,当我们向下滚动时,导航栏消失了,尽管经典的CSS位置:固定分配给了它的类。 我认为这是由于我使用了一些 css 来实现视差

回答 1 投票 0

如何让视差背景透明

我正在开展一个学校项目,其中我需要使用 html 和 css 创建一个信息网站。我不允许使用脚本标签或 JavaScript 文件。 我成功制作了视差

回答 1 投票 0

Flutter 中页面构建器的视差效果

我有一个PageView.builder,每个页面的背景都有一个图像。我想在更改页面时添加视差效果,我通过在图像 Alignment 属性中给出 Offset 来实现它。

回答 1 投票 0

React-Spring 视差层内的可点击组件不起作用?

我正在尝试使用 React Spring 在我的视差层之一中构建一个导航栏。导航栏按钮不可点击,我很困惑为什么。我一直在四处寻找...

回答 1 投票 0

视差和引脚折叠模式在折叠工具栏布局中不起作用

这是我的测试项目的代码:- 主要活动 包 com.invento.defcomm.collapsingtoolbarlayout; 导入 android.support.design.widget.CollapsingToolbarLayout; 导入 android.support.v7.app。

回答 2 投票 0

Flutter:如何使用Material 3主题FlexibleSpaceBar使其淡入向下滚动的AppBar颜色?

我有一个英雄图像,由一个 SliverAppBar 和一个包含英雄图像的FlexibleSpaceBar 的子元素组成。 当用户向下滚动页面时,英雄图像向上滚动并逐渐褪色为白色。白色是...

回答 1 投票 0

根据视口稍微向上或向下移动 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

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