Css实现视差滚动效果

246 阅读2分钟

虎嗅网看文章发现的一个小交互实现,如下:

打开f12看了一下它怎么实现的,发现实现还挺简单的。就是这种方式挺好的,先是一张图,然后在看文章内容,很与众不同。

说一下大体思路:

就是一个图片标签img,设置成相对浏览器窗口绝对定位,z-index层级设置比文本标签低,文本标签设置一个上内边距,高度和图片高度一样,背景设置全白遮盖。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="1.jpg" alt="1" style="position: fixed;
    top: 0;
    left: center;
    z-index: 2;">
    <section style="padding-top: 480px;
    z-index: 8;
    position: relative;background-color: transparent;">
    <div style="position: relative;background-color: #fff;">
        <div>历史是现实最好的参照物。
           
            在行业明显转冷时,老牌本土VC机构深创投却在该年的9月至11月密集出手,连续投资了16个项目。时任深创投董事长的靳海涛提出判断,“成本低了大概40%~60%,你会更冷静,对企业的优势和价值的考量会更清楚”,并要求股东增资。
            事实证明了靳海涛判断的正确性,深创投很快在2010年进入收获期,一年内投资的企业有26家IPO上市,创造全球同行业年度IPO退出的世界纪录。</div>
  <div>历史是现实最好的参照物。
        中国创投市场曾一度陷入危机。
        在行业明显转冷时,老牌本土VC机构深创投却在该年的9月至11月密集出手,连续投资了16个项目。时任深创投董事长的靳海涛提出判断,“成本低了大概40%~60%,你会更冷静,对企业的优势和价值的考量会更清楚”,并要求股东增资。
        事实证明了靳海涛判断的正确性,深创投很快在2010年进入收获期,一年内投资的企业有26家IPO上市,创造全球同行业年度IPO退出的世界纪录。</div>
    </div>
    </section>
</body>
</html>