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

相关文章

来自专栏数据小魔方

Xcelsius(水晶易表)系列16——自定义地图图表

今天继续跟大家分享水晶易表系列关于地图呈现的技巧——自定义数据地图。 该案例主要通过图标模拟与之前学过的动态可见性,根据数据需求,订制动态交互式地图图表。 案...

3446
来自专栏MelonTeam专栏

多端排版杂谈

导语 本次主要聊聊多平台的排版技术的差异与共同,涉及的平台有Web、Android、iOS 要说排版技术,在这三个平台中我觉得最有话语权的应该就We...

1807
来自专栏前端新视界

视差滚动技术的简介及运用

维基百科地址:https://en.wikipedia.org/wiki/Parallax_scrolling 视察滚动是计算机图形学以及网页设计中的技术。原理...

2306
来自专栏九彩拼盘的叨叨叨

《写给大家看的设计书》摘要与总结

该书适合完全没有设计背景,或在设计方面没有经过正规培训的人。 该书的描述浅显易懂,并且配有很多插图来做描述的说明。阅读起来觉得很轻松。

653
来自专栏Golang语言社区

【Golang语言社区】H5游戏开发--从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条

上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API。这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果。这个过程更重要的是参透一些...

3613
来自专栏应用案例

揭开ps的神秘面纱——初步认识photoshop

在这个看脸的“世界”里 论软件的强大莫过于ps 堪称美图界“磨人的小妖精” 下面就让小编带大家伙了解一下神秘的它吧 1.什么是psPS(位图图像处理软件Phot...

2048
来自专栏Coding迪斯尼

VUE+WebPack游戏设计:欲望都市,构建类RPG游戏的开发

1144
来自专栏葡萄城控件技术团队

基于Html5的Canvas实现的Clocks (钟表)

Canvas是Html5中非常重要的Feature 之一,究竟Canvas的未来会怎么样? 各大巨头有着不同的想法,微软的IE9会全面支持Canvas, Saf...

1986
来自专栏各种机器学习基础算法

关于Web语义化的意义

随着现在WEB(网页)的越来越火爆,WEB开发也越来越受人们重视。Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。...

2946
来自专栏编程

Web前端开发的四个阶段

第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终...

1885

扫码关注云+社区