css实现视差滚动效果

今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html

大多数的视差滚动效果都是使用js来实现的,实际上,如果你对兼容性要求不是很高,比方说忽略IE浏览器,则我们使用简单的几行CSS代码就可以实现视差滚动效果了。

css有一个background-attachment属性

作用是设置背景图像是否固定或者随着页面的其余部分滚动。

这里要注意任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

上代码

结构超级简单,用到的文字是00后小诗人姜二嫚的,哈哈,真的很不错

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css视差滚动</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    
        <div class="box">
            <div class="flowImage fixed-bg bg1">
                <p>
                    这个西红柿死了吗<br>
                    可是它的颜色<br>
                    还像鲜花一样奔放
                </p>
            </div>
            <div class="flowImage fixed-bg bg2">
                <p>为了跳到天上<br>
                   月亮先爬到树上。
                </p>
            </div>
            <div class="flowImage fixed-bg bg3">
                <p>
                    晚上<br>
                    我打着手电筒散步<br>
                    累了就拿它当拐杖<br>
                    我拄着一束光
                </p>
            </div>
            <div class="flowImage fixed-bg bg4">
                <p>
                我是在摸一颗星星<br>
                因为地球<br>
                也是一颗星星
            </p>
            </div>
            <div class="flowImage fixed-bg bg5">
                <p>
                    我在家等爸爸妈妈<br>
                       我饿了<br>
                    这时飞来一只金龟子<br>
                    可能金龟子也饿了
                </p>
            </div>
            <div class="flowImage fixed-bg bg6">
                <p>
                    每当见到加油站<br>
                    我就在心里大声地喊<br>
                    加油加油加油<br>
                    也不知为了谁
                </p>
            </div>
        </div>
    
</body>
</html>

css

body, html {
    height: 100%;
    margin: 0;
    padding: 0
}

.box {
    height: 100%;
    position: relative;
    z-index: 1;
}

.flowImage {
    position: relative;
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
   background-attachment: fixed; //划重点!!!
}

.flowImage>p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 10%;
    color: #fff;
    font-size: 30px;
    transform: translate(-10%, -50%);
}

.bg1 {
    background-image: url(images/1.jpg);
}

.bg2:nth-child(2) {
    background-image: url(images/2.jpg);
}

.bg3:nth-child(3) {
    background-image: url(images/3.jpg);
}

.bg4:nth-child(4) {
    background-image: url(images/4.jpg);
}

.bg5:nth-child(5) {
    background-image: url(images/5.jpg);
}

.bg6:nth-child(6) {
    background-image: url(images/6.jpg);
}

搞定收工

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

用python对汽车油耗进行数据分析(anaconda python3.6完全跑通)

编者按:前两天我们微信发了一篇文章《用python对汽车油耗进行数据分析》,有一网友学习后用python3.6重新跑了一下数据,请大家比较阅读。PPV课致力于为...

2796
来自专栏美团技术团队

关于刘海打理这种事儿,美团点评的iOS工程师早就有经验了,不信你看!

背景 iPhone X 刘海机于9月13日发布,给科技小春晚带来一波高潮。作为开发人员却多出来一份忧虑,iPhone X 怎么适配?我们 App 的脑袋会不会也...

3147
来自专栏工科狗和生物喵

【闲来无事,py写game】用pygame写一个冒泡排序的实体图

正文之前 不好意思忘了配图了!!时间太紧迫了,图书馆就要关门了!! ? 正文 import pygame,sys import time from pygame...

3839
来自专栏生信技能树

【Python版】 极简单方式实现 Circos

很高兴再次见到生信技能树的粉丝们,我是技能树VIP小编tsznxx,目前在安德森肿瘤医院工作,记忆力好的小朋友应该对我之前的教程有印象: 用GenePred注释...

33510
来自专栏数据派THU

教你在Tableau中绘制蝌蚪图等带有空心圆的图表(多链接)

本文将通过分享多种方法,包括成功的与失败的尝试,来讲解如何在Tableau中创建蝌蚪图等带有空心圆的图表。

1244
来自专栏ACM算法日常

消防车Firetruck(DFS+回溯)- UVA 208

中心城市消防部门与运输部门合作,维护反映城市街道现状的城市地图。消防员需要能够选择从火警站到火警的路线。 中心城市分为不重叠...

632
来自专栏Guangdong Qi

小Q-百度定位及递增递减的Label数字未完待续,持续更新中

1805
来自专栏华章科技

39个史诗级奇葩代码注释,程序不会崩,但程序员会

StackOverflow 上有一个类似的问题,问大家见过哪些超秀的注释,不少程序员纷纷吐槽自己见过的那些逆天注释,我们一起来围观一下。

771
来自专栏小狼的世界

惊闻NBC在奥运后放弃使用Silverlight

奥运初始的时候,媒体对于NBC使用Silverlight技术进行了高调的宣传,没想到奥运会结束刚刚三周的时间,NBC就弃用了Siverlight,重新采用Ado...

802
来自专栏前端说吧

mask遮罩层的华丽写法

1042

扫码关注云+社区