当我单击导航菜单(视差滚动)时滚动页面视差

Question

对不起，如果我的语气不好，我在网页中使用此代码。

.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。

Answer 1

你将不得不修改你的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;
}

让我知道它是否有效。

工作演示小提琴：http://jsfiddle.net/Fraximus/CFSEK/1/

Answer 2

有没有办法产生反向视差滚动？即在向下滚动内容时，我希望左窗格中的相应标题相应地突出显示。