视差滚动

最新推荐文章于 2024-05-07 21:40:45 发布

余阿良

最新推荐文章于 2024-05-07 21:40:45 发布

阅读量398

点赞数

分类专栏：视觉效果文章标签：视差滚动 attachment

本文链接：https://blog.csdn.net/aaaaaaliang/article/details/78974753

版权

视觉效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用background-attachment属性实现视差滚动：

background-attachment:

scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed: 当页面的其余部分滚动时，背景图像不会移动。
inherit: 规定应该从父元素继承 background-attachment 属性的设置。

<html>
<head>
    <title>background-attachment</title>
    <style type="text/css">
        div {
            width: 100%;
            height: 600px;
            background-attachment: fixed;
        }
        .one {
            background-image: url(https://i.ebayimg.com/images/g/wUQAAOSwx-9WxLX3/s-l500.webp);
        }
        .two {
            background-image: url(https://i.ebayimg.com/images/g/RlgAAOSwa~BYVqgy/s-l500.webp);
        }
        .three {
            background-image: url(https://i.ebayimg.com/images/g/nq4AAOSwPgxVNndi/s-l500.webp);
        }
        .third {
            background-image: url(https://i.ebayimg.com/images/g/wrIAAOSwezVWvQ7x/s-l500.webp);
        }

    </style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="third"></div>
</body>
</html>

利用动态改变元素位置实现视差滚动

仅仅用background-attachment实现的视差滚动比较生硬，实际项目中会动态微调元素的背景位置是的视差滚动效果更生动。

具体效果: http://www.firewatchgame.com/

拓展

十大经典的视差滚动网站

余阿良

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
视差滚动

利用background-attachment属性实现视差滚动：background-attachment:scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。fixed: 当页面的其余部分滚动时，背景图像不会移动。inherit: 规定应该从父元素继承 background-attachment 属性的设置。html>head> title>backgr
复制链接

扫一扫