抱歉如果我的语气不好, 我在网页中使用此代码。
HTML:
<a class="second" href="#nav1">Home</a>
<a class="second" href="#nav2">About</a>
<a class="second" href="#nav3">Contact</a>
<section id="nav1" data-speed="4" data-type="background">
<article>Big Tech Ideas Page3</article>
</section>
<section id="nav2" data-speed="4" data-type="background">
<article>Big Tech Ideas Page3</article>
</section>
<section id="nav3" data-speed="4" data-type="background">
<article>Big Tech Ideas Page3</article>
</section>
问题:我的问题是这个,当我点击“联系方式”的链接“关于”时,页面应该慢慢地滚动。 注意:(这里我指的是视差滚动)。
建议我 css 。
答案 0 :(得分:2)
您将不得不修改HTML。我不久前通过了一个解决方案,但我不记得它在哪里。无论如何,这是我修改你的代码的方式:
<强> HTML:强>
<a id="nav1"></a>
<a id="nav2"></a>
<a id="nav3"></a>
<header class="nav">
<nav>
<ul>
<li><a href="#nav1">Home</a> </li>
<li><a href="#nav2">About</a></li>
<li><a href="#nav3">Contact</a></li>
</ul>
</nav>
</header>
<section id="main">
<article class="article" id="nav1">
<p>Big Tech Ideas Page3</p>
</article>
<article class="article" id="nav2">
<p>Big Tech Ideas Page3</p>
</article>
<article class="article" id="contacto">
<p>Big Tech Ideas Page3</p>
</article>
</section>
<强> CSS:强>
a[id= "nav1"]:target ~ #main article.article {
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
a[id= "nav2"]:target ~ #main article.article {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[id= "nav3"]:target ~ #main article.article {
-webkit-transform: translateY( -1000px );
transform: translateY( -1000px );
}
header {
position: fixed;
z-index: 10;
}
.article {
width: 100%;
height: 600px;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.article p {
font-family: sans-serif;
font-size: 86px;
font-size: 5rem;
position:relative;
line-height: 300px;
text-align: center;
margin: 0;
}
让我知道它是否有效。
答案 1 :(得分:0)
有什么方法可以产生反向视差滚动? 即,在向下滚动内容时,我希望左窗格中的相应标题相应地突出显示。