固定背景实现的背景滚动特效

日期：2013-5-19  来源：GBin1.com

在线演示

分享一个来自corpse的固定背景滚动特效，使用background-attachment: fixed和导航菜单，页面会非常平滑的滚动。

HTML

<div 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>
</div>

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

via 极客社区

来源：固定背景实现的背景滚动特效