css特效 - 纯css实现页面滚动视差 - 《前端技术杂记》

背景固定效果
使用3D样式实现视差

background-attachment: fixed; perspective: 1px; 如果不知道这两个属性，用js实现下边效果可能要费点心思了

背景固定效果

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>滚动视觉差示例</title>
    <style>
        * {
            padding: 0;
            margin: 0
        }
        #main {
            overflow: hidden;
            height: 2000px;
            padding-top: 50vh;
            margin: auto
        }
        .bg-attachment {
            width: 100vw;
            height: 100vh;
            background: url(http://dingyue.ws.126.net/BMJALzniCGI1tdbtqcN8ubKqRBt5kNKumhhlHdWUS=oTW1555748371348compressflag.jpg) center center no-repeat;
            box-shadow: 0 3px 20px #000000 inset, 0 -3px 20px #000000 inset;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="bg-attachment"></div>
    </div>
</body>
</html>

使用3D样式实现视差

https://codesandbox.io/s/css-parallax-forked-czj31?file=/style.css
https://www.bilibili.com/video/BV1SJ41157dx

容器
/ 开启3D空间，数值越小，3D效果越大 /
perspective: 1px;
/ 在3D空间进行transform /
transform-style: preserve-3d;

要景差的元素
/ 核心, 按Z轴向远处移动1px, 大小会缩小1倍，使用scale放大到原图大小 /
transform: translateZ(-1px) scale(2);
将要景差慢的元素放到远处，在视觉上滚动会速度回变慢（就像在高楼上看汽车速度感觉很慢，马路旁边看汽车感觉很快）；元素会变小，用scale放大到正常大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
        html,
        body {
            margin: 0;
            font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            /* 需要隐藏最外层不可见区域以使视差生效 */
            overflow: hidden;
        }
        body {
            overflow-x: hidden;
            overflow-y: auto;
            height: 100vh;
            /* 开启3D空间，数值越小，3D效果越大 */
            perspective: 1px;
            /* 在3D空间进行transform */
            transform-style: preserve-3d;
        }
        header {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transform-style: inherit;
            height: 100vh;
            /* z-index: 10; */
            /* 核心, 按Z轴向远处移动1px, 大小会缩小1倍，使用scale放大到原图大小 */
            transform: translateZ(-1px) scale(2);
        }
        header h1 {
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 1em 4em;
            font-size: 3em;
        }
        header::before {
            content: "";
            display: block;
            background-image: url(https://images.pexels.com/photos/2310815/pexels-photo-2310815.jpeg?cs=srgb&dl=photo-of-opened-metal-windows-2310815.jpg&fm=jpg);
            background-size: cover;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            /* 核心, 按Z轴向远处移动1px, 大小会缩小1倍，使用scale放大到原图大小 */
            /* transform: translateZ(-1px) scale(2); */
        }
        main {
            display: flex;
            justify-content: center;
            position: relative;
            background-color: #222f3e;
        }
        article {
            width: 90vw;
            max-width: 960px;
            padding: 6em 0;
            color: white;
            font-size: 18px;
            text-align: justify;
            letter-spacing: 0.075em;
            text-indent: 2em;
            line-height: 1.8em;
        }
        /* 屏幕适配 */
        @media screen and (max-width: 1024px) {
            header h1 {
                font-size: 2.5em;
                padding: 1em 1.5em;
            }
        }
        @media screen and (max-width: 600px) {
            header h1 {
                font-size: 1.5em;
                padding: 1em 1em;
            }
            article {
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>纯 CSS 实现视差滚动效果</h1>
    </header>
    <main>
        <article>
            <p>
                《洛神赋》是中国三国时期曹魏文学家曹植创作的辞赋名篇。此赋虚构了作者自己与洛神的邂逅和彼此间的思慕爱恋，洛神形象美丽绝伦，人神之恋飘渺迷离，但由于人神道殊而不能结合，最后抒发了无限的悲伤怅惘之情。全篇大致可分为六段：第一段写作者从洛阳回封地时，在恍惚之际看到洛神伫立山崖；第二段写洛神容仪服饰之美；第三段写作者爱慕洛神既识礼仪又善言辞，虽相互赠答，但担心遇合受阻；第四段写洛神为“君王”之诚所感后将来而未至的情状和举动；第五段写洛神来临扈从之多，终以人神道殊，含恨离去；第六段写洛神去后作者对顾望思慕不忍离去的深情。全赋辞采华美，描写细腻，想象丰富，情思绻缱，若有寄托。
            </p>
            <p>
                黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋。其辞曰：余从京域，言归东藩。背伊阙，越轘辕，经通谷，陵景山。日既西倾，车殆马烦。尔乃税驾乎蘅皋，秣驷乎芝田，容与乎阳林，流眄乎洛川。于是精移神骇，忽焉思散。俯则末察，仰以殊观，睹一丽人，于岩之畔。乃援御者而告之曰：“尔有觌于彼者乎？彼何人斯？若此之艳也！”御者对曰：“臣闻河洛之神，名曰宓妃。然则君王所见，无乃日乎？其状若何？臣愿闻之。”余告之曰：“其形也，翩若惊鸿，婉若游龙。荣曜秋菊，华茂春松。仿佛兮若轻云之蔽月，飘摇兮若流风之回雪。远而望之，皎若太阳升朝霞；迫而察之，灼若芙蕖出渌波。秾纤得衷，修短合度。肩若削成，腰如约素。延颈秀项，皓质呈露。芳泽无加，铅华弗御。云髻峨峨，修眉联娟。丹唇外朗，皓齿内鲜，明眸善睐，靥辅承权。瑰姿艳逸，仪静体闲。柔情绰态，媚于语言。奇服旷世，骨像应图。披罗衣之璀粲兮，珥瑶碧之华琚。戴金翠之首饰，缀明珠以耀躯。践远游之文履，曳雾绡之轻裾。微幽兰之芳蔼兮，步踟蹰于山隅。于是忽焉纵体，以遨以嬉。左倚采旄，右荫桂旗。壤皓腕于神浒兮，采湍濑之玄芝。余情悦其淑美兮，心振荡而不怡。无良媒以接欢兮，托微波而通辞。愿诚素之先达兮，解玉佩以要之。嗟佳人之信修，羌习礼而明诗。抗琼［王弟］以和予兮，指潜渊而为期。执眷眷之款实兮，惧斯灵之我欺。感交甫之弃言兮，怅犹豫而狐疑。收和颜而静志兮，申礼防以自持。于是洛灵感焉，徙倚彷徨，神光离合，乍阴乍阳。竦轻躯以鹤立，若将飞而未翔。践椒涂之郁烈，步蘅薄而流芳。超长吟以永慕兮，声哀厉而弥长。尔乃众灵杂遢，命俦啸侣，或戏清流，或翔神渚，或采明珠，或拾翠羽。从南湘之二妃，携汉滨之游女。叹匏瓜之无匹兮，咏牵牛之独处。扬轻袿之猗靡兮，翳修袖以延伫。休迅飞凫，飘忽若神，陵波微步，罗袜生尘。动无常则，若危若安。进止难期，若往若还。转眄流精，光润玉颜。含辞未吐，气若幽兰。华容婀娜，令我忘餐。于是屏翳收风，川后静波。冯夷鸣鼓，女娲清歌。腾文鱼以警乘，鸣玉鸾以偕逝。六龙俨其齐首，载云车之容裔，鲸鲵踊而夹毂，水禽翔而为卫。于是越北沚。过南冈，纡素领，回清阳，动朱唇以徐言，陈交接之大纲。恨人神之道殊兮，怨盛年之莫当。抗罗袂以掩涕兮，泪流襟之浪浪。悼良会之永绝兮。哀一逝而异乡。无微情以效爱兮，献江南之明。虽潜处于太阳，长寄心于君王。忽不悟其所舍，怅神宵而蔽光。于是背下陵高，足往神留，遗情想像，顾望怀愁。冀灵体之复形，御轻舟而上溯。浮长川而忘返，思绵绵督。夜耿耿而不寐，沾繁霜而至曙。命仆夫而就驾，吾将归乎东路。揽騑辔以抗策，怅盘桓而不能去。
            </p>
        </article>
    </main>
</body>
</html>