固定背景實現的背景滾動特效

在線演示

分享一個來自corpse的固定背景滾動特效,使用background-attachment: fixed和導航菜單,頁面會非常平滑的滾動。

HTML

<p id="cbp-fbscroller" class="cbp-fbscroller">
    <nav>
        <a href="#fbsection1" class="cbp-fbcurrent">Section 1</a>
        <a href="#fbsection2">Section 2</a>
        <a href="#fbsection3">Section 3</a>
        <a href="#fbsection4">Section 4</a>
        <a href="#fbsection5">Section 5</a>
    </nav>
    <section id="fbsection1"></section>
    <section id="fbsection2"></section>
    <section id="fbsection3"></section>
    <section id="fbsection4"></section>
    <section id="fbsection5"></section>
</p>
CSS

/* Set all parents to full height */
html, body,
.container,
.cbp-fbscroller,
.cbp-fbscroller section {
    height: 100%;
}
 
/* The nav is fixed on the right side  and we center it by translating it 50%
(we don't know it's height so we can't use the negative margin trick) */
.cbp-fbscroller > nav {
……..

You May Also Like