Question

我试图让我的页面的内容部分在横幅图像上做一个微小的视差滚动，同时保持导航/标题固定和不动。

现在，导航部分顶部的图像和内容视差都是如此。有人能帮忙吗？

＆＃13;

*
{
    margin:0;
    padding:0;
}

p
{
    margin-top: 20px;
		margin-bottom: 20px;
}

/* #image-wrapper
{
	position: fixed;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	perspective: 1px;
	perspective-origin: 0 0;
}  */

.image
{
	transform-origin: 0 0;
	transform: translateZ(-1px) scale(2);
}

#myBanner
{
	display: block;
	width: 100%;
	height: 300px;
}

.content
{
	position: relative;
	background: rgba(0,0,0,0.8);
	color: #fff;
	height: 900px;
	max-width: 3000px;
  margin:5% auto;
	top: -92px;
}

header
{
	height: 120px;
	width: 100%;
	margin-bottom: 82px;
	border: 1px solid black;
	
}

#test
{
	position: fixed;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	perspective: 1px;
	perspective-origin: 0 0;
}

＆＃13;

<div id="test">

	<header></header>
<div id="image-wrapper">
	<div class="image">
		<img src="http://i.imgur.com/hPLqUtN.jpg" alt="" id="myBanner" />
	</div>


<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi cum quam perspiciatis nostrum harum fugit vitae eaque! Eligendi voluptas natus, nostrum dolorum quam nesciunt? Veniam libero illo, itaque corporis consectetur.</p>
<p>Tempore quasi illo ipsa est animi natus doloribus tenetur provident error, atque nisi voluptates ad quod expedita mollitia, quaerat aut exercitationem? Ullam ab pariatur facere veritatis, officia quos dicta placeat?</p>
<p>Nam sapiente aspernatur nisi molestias architecto, ipsum provident voluptatum accusamus numquam cum fugit optio dolorum asperiores mollitia? Sunt voluptas pariatur esse quas fugit architecto consequuntur, sit ullam, explicabo libero ea.</p>
<p>Velit rem obcaecati perferendis est minus quisquam asperiores blanditiis earum quis eos ducimus neque dolores quibusdam dolor quod ad corporis voluptate, aliquid, in explicabo recusandae iure. Magni a quos molestiae.</p>
</div>
</div>
	
	</div>

＆＃13;

Answer 1

为了创建视差效果，您需要设置背景图像并将其背景附件属性设置为固定，然后滚动时会产生视觉错觉。请参阅this链接到小提琴。

在您的HTML中，我已将图像更改为现在的背景图像：

<div class="image" style="background-image: url(http://i.imgur.com/hPLqUtN.jpg);"></div>

AND

我已经更改了CSS中的一些样式并删除了没有帮助/做任何事情的CSS：

header {
  height: 120px;
  width: 100%;
  border: 1px solid black;
}
.image {
  /* Set a specific height - this can be changed to whatever you want */
    height: 500px; 
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.content {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  height: 900px;
  max-width: 3000px;
  margin: 0 auto;
}

小提琴的链接包含所有代码，包括所有HTML / CSS。

固定标题视差滚动

1 个答案: