今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思，于是就做了一个，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:;

    padding: 0

}

.box {

    height: 100%;

    position: relative;

    z-index:;

}

.flowImage {

    position: relative;

    height: 500px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center center;

    z-index:;

   background-attachment: fixed; //划重点！！！

}

.flowImage>p {

    margin:;

    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);

}

搞定收工

css实现视差滚动效果的更多相关文章

  1. CSS完成视差滚动效果

    一.是什么 视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验 我们可以把网页解刨成:背景层.内容层.悬浮层 当滚动鼠标滑轮的时候 ...

  2. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

  3. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  4. 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

    www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

  5. 使用javascript开发的视差滚动效果的云彩

    在线演示 jquery.parallax.js是一款能够帮助你快速开发视差效果的jQuery插件,在这里我们使用它来开发一款漂亮的云朵视差效果. 主要代码: Javascript ........ 阅 ...

  6. [Swift通天遁地]九、拔剑吧-(13)创建页面的景深视差滚动效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. [Swift通天遁地]九、拔剑吧-(14)创建更美观的景深视差滚动效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. 利用background-attachment做视差滚动效果

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...

  9. 那些H5用到的技术（5）——视差滚动效果

    前言原理使用方式结合swiper.js 前言 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 目前最火热的视差开源库为pa ...

随机推荐

  1. Docker（七）：Docker容器卷管理

    1.使用容器卷的原因:Docker容器产生的数据,如果不通过commit生成新的镜像,数据会在容器删除后丢失.为了能持久化保存和共享容器的数据,Docker提出了两种管理数据的方式:数据卷和数据卷容器 ...

  2. ES6 let和const命令（3）

    const 用来声明常量.一旦声明,就不能改变. const在声明必须初始化,只声明不赋值会出错 const的作用域与let一样,只在声明的块级作用域有效. const命令声明的常量也不提升,同样存在 ...

  3. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第2讲（四大界面之间的跳转与玩家飞机的移动）

    一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3. ...

  4. 微信扫码支付功能详细教程————Java

    前言  首先声明 我并非原创 原创是 http://blog.csdn.net/wangqiuyun/article/details/51241064 我只是在前辈的基础 加以解释说明 还有自己的一些 ...

  5. 编译Twitter的Heron时一直报错“heron/bazel_configure.py", line 25, in <module> import semver ImportError: No module named semver”如何处理。

    今天编译heron的时候,从官方git到的源码bazel_configure的时候一直报错如下: Traceback (most recent call last): File , in <mo ...

  6. 最近提交一个mysql5.7的bug,提醒自己以后注意写SQL要规范

    最近帮朋友提交一个mysql5.7的bug , oracle mysql 的大神还回复我 , 以后注意书写sql规范 , 潜台词是不是不要给他们增加工作量 https://bugs.mysql.com ...

  7. amaze UI 笔记 - JS

    导航添加依据 http://amazeui.org/javascript 下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢!* =(官网这块写的很详细) 一 .UI增强 1.警告框 显示可关闭的 ...

  8. EditTable可编辑的表格

    EditTable可编辑的表格 EditTable基于tabel布局的表格,表格内容单击可以编辑,编辑完毕即可显示新的内容:    ESC按键可以撤销编辑,返回原有内容.    点击"添加& ...

  9. BASIC-3 字母图形 循环 字符串

      基础练习 字母图形   时间限制:1.0s   内存限制:256.0MB        问题描述 利用字母可以组成一些美丽的图形,下面给出了一个例子: ABCDEFG BABCDEF CBABCD ...

  10. SpringCloud学习笔记(5)——Config

    参考Spring Cloud官方文档第4~10章 官网文档中所有示例中的配置都在git上 https://github.com/spring-cloud-samples/config-repo Par ...