今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,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. C#调用SendMessage 用法

    函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.该函数是应用程序和应用程序之间进行消息传递的主要手段之一.    函数原型:LRESUL ...

  2. ABAP 订单转交货单

    *& Report  ZSDR025 *& *&---------------------------------------------------------------- ...

  3. Android回调接口的写法

    方法一: 定义一个接口,里面写想要对外提供的方法,在逻辑层方法的参数里传递进去,让在需要的时候调接口里的方法. 实例一: public class SmsUtils { public interfac ...

  4. 正则神器,RegexBuddy

    解释 转换 测试匹配 使用帮助 正则图书馆 转为PHP案例 功能强大,虽然是英文的!挺不错的~

  5. ubuntu16.04+opencv3.1配置

    #安装必要的依赖sudo apt-get install build-essential cmakesudo apt-get install cmake Git libgtk2.0-dev pkg-c ...

  6. HDU3844Tour (好题)

    题意:   有N个点,M个单向边,现在要你设计N条路线覆盖所有的点,每个点都属于且值属于一个环.(为什么是N条边:和最小生成树为什么有N-1条边是一样的证明). 解析:  每个点都有一个喜欢对象(出度 ...

  7. ASP.NET Core学习系列

    .NET Core ASP.NET Core ASP.NET Core学习之一 入门简介 ASP.NET Core学习之二 菜鸟踩坑 ASP.NET Core学习之三 NLog日志 ASP.NET C ...

  8. 服务器被疑似挖矿程序植入,发现以及解决过程(建议所有使用sonatype/nexus3的用户清查一下)

    此次服务器被植入挖矿程序发现起来较为巧合,首先是上周三开始,我通过sonatype/nexus3搭建的仓库间歇性崩溃,但是每次重新start一下也能直接使用所以没有彻底清查,去docker logs里 ...

  9. mongooDb链接javaapi

    mongodb链接有多种:所以不同链接下的api也不太一样. 1.api比较全面 public void query2(){ String mondburl = Config.getInstance( ...

  10. yolo buffer is too small for requested array

    yolo.cfg 与 yolo.weights 版本一定要对应, darknet链接 https://github.com/pjreddie/darknet 下载后在cfg文件夹下找到yolov2的配 ...