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 条评论
登录 后参与评论

相关文章

来自专栏儿童编程

Scratch做高逼格的互动艺术作品(一)

最近在郎师兄推荐下初步了解了一下processing互动编程艺术,真是美轮美奂,直接跪了。今天我用Scratch也做了一个互动的小作品,自我感觉挺好(大神勿喷~...

1084
来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(四)——文本标签

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

3389
来自专栏数据的力量

我们来做瀑布图

1223
来自专栏阿凯的Excel

快心遂意-快捷键弱智版

今天和大家分享一些快捷键,为啥非要分享快捷键呢,因为想让大家有种 快捷键弱智版正式开始 Ctrl+Z 撤销 Ctrl+Y 撤销的撤销(我猜你不知道,你可以试一...

2563
来自专栏前端新视界

如何使用 Bootstrap 搭建更合理的 HTML 结构

前言 Bootstrap 的成功不仅在于其简单易用,更在于其样式的规范性以及 HTML 结构的合理性。但是很多人在使用 Bootstrap 时只是依照文档盲目的...

2725
来自专栏达摩兵的技术空间

pc与手机页面的差别分析

也许你还没有过多的思考过手机页面与pc页面的差别,也没从产品角度思考过从产品设计上两者有什么不同,那么不妨跟小编一起去思考下,也许能给你一些有益的启示。

573
来自专栏互联网杂技

为未来的SaaS应用提供新的交互及视觉设计

云端软件即服务已代替传统笨重的桌面软件,打造优异的用户使用界面让你的应用脱颖而出已是势在必行之事,然而这也意味着诸多的挑战。 本文介绍给大家一些基本需要关注的点...

32612
来自专栏Android 开发者

Android P 中的新文本特性

在 “What’s new in Android P Beta” 中我们已经谈到 Android 的两个新文本特性。现在既然 Android P Beta 3 ...

652
来自专栏Web 开发

写得少,都吐不出墨水了

最近在弄毕业设计,总有个现象,就是一个段落,自己吐墨水的话,吐不超过两句就吐完了。回头看看博客,发现这一年来,才3篇文章,原来是这样才缺乏墨水啊。

250
来自专栏IT大咖说

从UI到AI——移动端H5生成技术漫谈

1325

扫描关注云+社区