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

矫情吗；* 2022-02-16 17:57 268阅读 0赞

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

![固定背景实现的背景滚动特效][title.jpg]

**[在线演示][Link 1]**

分享一个来自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 [极客社区][Link 2]

来源：[固定背景实现的背景滚动特效][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/css/20130519-background-scroll/
[title.jpg]: http://www.gbin1.com/technology/css/20130519-background-scroll/title.jpg
[Link 1]: http://www.gbtags.com/gb/share/994.htm
[Link 2]: http://www.gbtags.com

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关背景图片固定（背景图片附着）（HTML、CSS）

背景图片固定（背景图片附着）（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

桃扇骨/ 2023年10月03日 12:45/ 0 赞/ 25 阅读

相关 125.如何使用 JS 实现背景视差特效

效果 (源码网盘地址在最后) ![f1af832e59ef5705159c41365b7cb263.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

忘是亡心i/ 2023年01月01日 02:49/ 0 赞/ 170 阅读

相关页面背景图片滚动

<view class="login"> <view class="bg"> <image mode="aspectFit" src

约定不等于承诺〃/ 2022年12月25日 04:51/ 0 赞/ 361 阅读

相关 CSS背景——背景颜色、背景图片、背景平铺、背景图像位置、背景图像固定、背景图像半透明

CSS背景 CSS可以通过背景属性给页面元素添加样式背景背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。背景颜色 backgro

短命女/ 2022年11月20日 08:17/ 0 赞/ 253 阅读

相关 CSS实现背景图片固定滚动形成视觉差效果

最近在写项目的时候遇到一个页面效果：背景图片固定，但是当我们滚动滚动条的时候感觉背景图片也随着滚动条上下滚动，查阅了相关资料，做记录如下：只要固定的元素的背景backgr

矫情吗；*/ 2022年06月16日 02:36/ 0 赞/ 315 阅读

相关固定背景图片

> background-attachment 该属性来定义背景图片随滚动轴的移动方式 > > 取值: scroll | fixed | inherit > > scrol

野性酷女/ 2022年06月08日 00:07/ 0 赞/ 258 阅读

相关 css使其背景固定

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

Bertha 。/ 2022年06月07日 08:43/ 0 赞/ 230 阅读

相关动态背景线条，鼠标移动线条汇聚---背景特效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3

快来打我*/ 2022年04月13日 14:18/ 0 赞/ 304 阅读

相关 css background-attachment:fixed 固定背景、不随内容一起滚动

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 兼容性：全兼容，只不过IE滚动时会有一点不流畅。 b

以你之姓@/ 2022年03月26日 12:50/ 0 赞/ 417 阅读

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

日期：2013-5-19 来源：[GBin1.com][] ![固定背景实现的背景滚动特效][title.jpg] [在线演示][Link 1] 分享一个来自co

矫情吗；*/ 2022年02月16日 17:57/ 0 赞/ 269 阅读