如何解决仅使用CSS的视差:调整前景和背景的滚动速度,以使它们同时到达底部
我正处于编码之旅的开始,所以我必须专门使用HTML和CSS进行当前项目。任务是使用display: flex;
和flex-direction: column;
创建一个简单的单页网站,并使用CSS进行测试。作为具有足够空闲时间的挑战发烧友,我开始为单页寻呼机添加视差。我没有遗憾-
我认为我已经理解了广泛的界限,但是我还没有完全理解它的深层原理。通过调整this video by Red Stapler中的代码,我设法构建了某种作品。您可以在here on CopePen处找到我的作品。我知道这很丑陋,但我真的很想在对内容进行样式设置之前先学习视差(困难部分在简单部分之前)。
如您所见,如果您签出我的笔,我将原来的background-image
注释掉,然后将其替换为linear-gradient
。我的background-image
的尺寸为1280px * 960px,但我宁愿以200vh的高度显示它。我还考虑过剪切每个article
来创建视觉平衡并缩短页面(我最初打算使用200vh的总高度,因此是background-image
的尺寸)。
这是我的问题。如何正确校准视差,以使前景高度与背景高度相对应?更具体地说,如何调整滚动速度,以使前景和背景同时到达各自的底部?并与我剪切/取消剪切部分内容的想法兼容(这将导致滚动速度适应于变化的前景高度)?
我感觉这两个属性有一些可尝试之处z-index: -1;
transform: translateZ(-1px) scale(2);
,因为视频中的那个家伙解释说具有不同索引的元素将以不同的速度滚动,但是我花了最后的时间几个小时在各个方向上搜寻,却找不到答案。或者,也许我读了无数次,但它却让我感到头疼。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。