当我点击导航菜单（视差滚动）时滚动页面视差 [英] Scroll page parallax when I click on navigation menu (Parallax Scrolling)

问题描述

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

HTML： / p>

 < a class =secondhref =＃nav1>首页< / a> 
< a class =secondhref =＃nav2>关于< / a> 
< a class =secondhref =＃nav3>联系人< / a> 
 
< section id =nav1data-speed =4data-type =background> 
< article> Big Tech Ideas Page3< / article> 
< / section> 
 
< section id =nav2data-speed =4data-type =background> 
< article> Big Tech Ideas Page3< / article> 
< / section> 
 
< section id =nav3data-speed =4data-type =background> 
< article> Big Tech Ideas Page3< / article> 
< / section>问题：我的问题是这个，当我点击链接关于我 的联系人，页面应慢慢滚动。 
 注意（这里是指视差滚动）。
 
 
 
建议我 css  / p> 
 
解决方案
您必须修改HTML。我之前经过一个解决方案，但我不记得它在哪里。无论如何，我将修改您的代码：
 
 
 
  HTML： 
 < a id =nav1>< / a> 
< a id =nav2>< / a> 
< a id =nav3>< / a> 
< header class =nav> 
< nav> 
< ul> 
< li>< a href =＃nav1>首页< / a> < / li> 
< li>< a href =＃nav2>关于< / a>< / li> 
< li>< a href =＃nav3>联系人< / a>< / li& 
< / ul> 
< / nav> 
< / header> 
 
< section id =main> 
< article class =articleid =nav1> 
< p> Big Tech Ideas Page3< / p> 
< / article> 
 
< article class =articleid =nav2> 
< p> Big Tech Ideas Page3< / p> 
< / article> 
 
< article class =articleid =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/  
 
Sorry If my tone is not good,
I am using this code in a web page.

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>
Question: my question is this, When I click on link "About" of "Contact", page should scroll slowly slowly . 
NOTE:(Here I mean Parallax Scrolling).

suggest me css for this.
解决方案
You're gonna have to modify your HTML. I passed across a solution some time ago but I don't remember where it is. Anyway here's how I'd modify your code:

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;
}
Let me know if it works.

Working demo fiddle: http://jsfiddle.net/Fraximus/CFSEK/1/

                        
这篇关于当我点击导航菜单（视差滚动）时滚动页面视差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！