css视差滑动(阅读网站案例)

今天我们来讲讲上面是视觉差的滑动吧先看一下效果图,他是通过3d空间让移动速度不一样导致的，其实这里视差效果没有那么强。但是你和下面作对比效果就强了；

一、准备代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{margin:0;padding:0;
}
body{height: 100vh;width: 100%;background-color:cadetblue;}
div:first-of-type{position:relative;width: 100%;height: 100vh;background: url(banner.jpg) no-repeat left top / cover;
}
div:first-of-type::after{content:"视差滑动";display:block;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);color: white;padding:35px 10px;background: rgba(0,0,0,0.9);font-size: 3em;letter-spacing: 10px;}
div:last-of-type{width: 70vw;font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;margin: auto;font-size: 18px;text-indent: 2em;line-height: 28px;
}
p{color: white;padding-top: 10px;}
</style>
</head>
<body><header><div></div><div><p>《洛神赋》是中国三国时期曹魏文学家曹植创作的辞赋名篇。此赋虚构了作者自己与洛神的邂逅和彼此间的思慕爱恋，洛神形象美丽绝伦，人神之恋飘渺迷离，但由于人神道殊而不能结合，最后抒发了无限的悲伤怅惘之情。全篇大致可分为六段：第一段写作者从洛阳回封地时，在恍惚之际看到洛神伫立山崖；第二段写洛神容仪服饰之美；第三段写作者爱慕洛神既识礼仪又善言辞，虽相互赠答，但担心遇合受阻；第四段写洛神为“君王”之诚所感后将来而未至的情状和举动；第五段写洛神来临扈从之多，终以人神道殊，含恨离去；第六段写洛神去后作者对顾望思慕不忍离去的深情。全赋辞采华美，描写细腻，想象丰富，情思绻缱，若有寄托。</p><p>黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋。其辞曰：余从京域，言归东藩。背伊阙，越轘辕，经通谷，陵景山。日既西倾，车殆马烦。尔乃税驾乎蘅皋，秣驷乎芝田，容与乎阳林，流眄乎洛川。于是精移神骇，忽焉思散。俯则末察，仰以殊观，睹一丽人，于岩之畔。乃援御者而告之曰：“尔有觌于彼者乎？彼何人斯？若此之艳也！”御者对曰：“臣闻河洛之神，名曰宓妃。然则君王所见，无乃日乎？其状若何？臣愿闻之。”余告之曰：“其形也，翩若惊鸿，婉若游龙。荣曜秋菊，华茂春松。仿佛兮若轻云之蔽月，飘摇兮若流风之回雪。远而望之，皎若太阳升朝霞；迫而察之，灼若芙蕖出渌波。秾纤得衷，修短合度。肩若削成，腰如约素。延颈秀项，皓质呈露。芳泽无加，铅华弗御。云髻峨峨，修眉联娟。丹唇外朗，皓齿内鲜，明眸善睐，靥辅承权。瑰姿艳逸，仪静体闲。柔情绰态，媚于语言。奇服旷世，骨像应图。披罗衣之璀粲兮，珥瑶碧之华琚。戴金翠之首饰，缀明珠以耀躯。践远游之文履，曳雾绡之轻裾。微幽兰之芳蔼兮，步踟蹰于山隅。于是忽焉纵体，以遨以嬉。左倚采旄，右荫桂旗。壤皓腕于神浒兮，采湍濑之玄芝。余情悦其淑美兮，心振荡而不怡。无良媒以接欢兮，托微波而通辞。愿诚素之先达兮，解玉佩以要之。嗟佳人之信修，羌习礼而明诗。抗琼［王弟］以和予兮，指潜渊而为期。执眷眷之款实兮，惧斯灵之我欺。感交甫之弃言兮，怅犹豫而狐疑。收和颜而静志兮，申礼防以自持。于是洛灵感焉，徙倚彷徨，神光离合，乍阴乍阳。竦轻躯以鹤立，若将飞而未翔。践椒涂之郁烈，步蘅薄而流芳。超长吟以永慕兮，声哀厉而弥长。尔乃众灵杂遢，命俦啸侣，或戏清流，或翔神渚，或采明珠，或拾翠羽。从南湘之二妃，携汉滨之游女。叹匏瓜之无匹兮，咏牵牛之独处。扬轻袿之猗靡兮，翳修袖以延伫。休迅飞凫，飘忽若神，陵波微步，罗袜生尘。动无常则，若危若安。进止难期，若往若还。转眄流精，光润玉颜。含辞未吐，气若幽兰。华容婀娜，令我忘餐。于是屏翳收风，川后静波。冯夷鸣鼓，女娲清歌。腾文鱼以警乘，鸣玉鸾以偕逝。六龙俨其齐首，载云车之容裔，鲸鲵踊而夹毂，水禽翔而为卫。于是越北沚。过南冈，纡素领，回清阳，动朱唇以徐言，陈交接之大纲。恨人神之道殊兮，怨盛年之莫当。抗罗袂以掩涕兮，泪流襟之浪浪。悼良会之永绝兮。哀一逝而异乡。无微情以效爱兮，献江南之明。虽潜处于太阳，长寄心于君王。忽不悟其所舍，怅神宵而蔽光。于是背下陵高，足往神留，遗情想像，顾望怀愁。冀灵体之复形，御轻舟而上溯。浮长川而忘返，思绵绵督。夜耿耿而不寐，沾繁霜而至曙。命仆夫而就驾，吾将归乎东路。揽騑辔以抗策，怅盘桓而不能去。</p></div></header>
</body>
</html>

你会看到这样的一个效果，怎么样和上面我的图还是有区别的吧！

我们要实现一个怎么样的效果了，看下图

看到区别了没有，我并没有通过js修改滑动速度，这是开启3d空间向后偏移，导致的视觉差，所以我们要让开头图片有视觉差的感觉。好处是：会有3d的感觉，给你的网页带来更好的视觉。

二、核心代码

html{overflow:auto;
}
body{overflow-x: hidden;                    /*x轴溢出隐藏*/overflow-y: auto;                     /*y轴溢出自适应*/height: 100vh;width: 100%;transform-style: preserve-3d;       /*开启3d空间*/perspective: 1px;                   /*你从什么位置观察3d空间,这个值只会偏移使用到不写也行*/
}
header{transform-style: preserve-3d;       /*在你要偏移的3d空间的父容器也写一条*/
}
div{transform:translateZ(-1px) scale(2); /*向后退一倍的距离，然后放大一倍*/
}

transform:translateZ(-1px) scale(2);这句话是z轴向后退，你就当成一个人向后走了，那么你看这个人他不就也变小了，这里也是一样的，所以放大一倍，看起来和没有后退一样，

2、问题

看到左边有一点背景色了没有，这是应为，z的后退会出现位置的偏差导致的，所以我们只需要放大transform:translate(-1px) scale(2.1)多放大一点不久可以把白边遮住了，当然还有很多办法。就你们自己寻找了。

三、完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{margin:0;padding:0;
}
html{overflow: hidden;
}
body{overflow-x: hidden;                    overflow-y: auto; height: 100vh;width: 100%;background: blue;transform-style: preserve-3d;           /*开启3d空间*/perspective: 1px;                       /*你从什么位置观察3d空间,这个值只会偏移使用到不写也行*/
}
header{transform-style: preserve-3d;           /*开启3d空间*/
}
div:first-of-type{position:relative;width: 100%;height: 100vh;background: url(banner.jpg) no-repeat left top / cover;transform:translateZ(-1px) scale(2.1);z-index: -1;
}
div:first-of-type::after{content:"视差滑动";display:block;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);color: white;padding:35px 10px;background: rgba(0,0,0,0.9);font-size: 3em;letter-spacing: 10px;}
div:last-of-type{width: 100%;font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;margin: auto;height: 100vh;font-size: 18px;text-indent: 2em;line-height: 28px;background: #000;
}
p{margin:auto;width: 70vw;color: white;padding-top: 10px;}</style>
</head>
<body><header><div></div><div><p>《洛神赋》是中国三国时期曹魏文学家曹植创作的辞赋名篇。此赋虚构了作者自己与洛神的邂逅和彼此间的思慕爱恋，洛神形象美丽绝伦，人神之恋飘渺迷离，但由于人神道殊而不能结合，最后抒发了无限的悲伤怅惘之情。全篇大致可分为六段：第一段写作者从洛阳回封地时，在恍惚之际看到洛神伫立山崖；第二段写洛神容仪服饰之美；第三段写作者爱慕洛神既识礼仪又善言辞，虽相互赠答，但担心遇合受阻；第四段写洛神为“君王”之诚所感后将来而未至的情状和举动；第五段写洛神来临扈从之多，终以人神道殊，含恨离去；第六段写洛神去后作者对顾望思慕不忍离去的深情。全赋辞采华美，描写细腻，想象丰富，情思绻缱，若有寄托。</p><p>黄初三年，余朝京师，还济洛川。古人有言，斯水之神，名曰宓妃。感宋玉对楚王神女之事，遂作斯赋。其辞曰：余从京域，言归东藩。背伊阙，越轘辕，经通谷，陵景山。日既西倾，车殆马烦。尔乃税驾乎蘅皋，秣驷乎芝田，容与乎阳林，流眄乎洛川。于是精移神骇，忽焉思散。俯则末察，仰以殊观，睹一丽人，于岩之畔。乃援御者而告之曰：“尔有觌于彼者乎？彼何人斯？若此之艳也！”御者对曰：“臣闻河洛之神，名曰宓妃。然则君王所见，无乃日乎？其状若何？臣愿闻之。”余告之曰：“其形也，翩若惊鸿，婉若游龙。荣曜秋菊，华茂春松。仿佛兮若轻云之蔽月，飘摇兮若流风之回雪。远而望之，皎若太阳升朝霞；迫而察之，灼若芙蕖出渌波。秾纤得衷，修短合度。肩若削成，腰如约素。延颈秀项，皓质呈露。芳泽无加，铅华弗御。云髻峨峨，修眉联娟。丹唇外朗，皓齿内鲜，明眸善睐，靥辅承权。瑰姿艳逸，仪静体闲。柔情绰态，媚于语言。奇服旷世，骨像应图。披罗衣之璀粲兮，珥瑶碧之华琚。戴金翠之首饰，缀明珠以耀躯。践远游之文履，曳雾绡之轻裾。微幽兰之芳蔼兮，步踟蹰于山隅。于是忽焉纵体，以遨以嬉。左倚采旄，右荫桂旗。壤皓腕于神浒兮，采湍濑之玄芝。余情悦其淑美兮，心振荡而不怡。无良媒以接欢兮，托微波而通辞。愿诚素之先达兮，解玉佩以要之。嗟佳人之信修，羌习礼而明诗。抗琼［王弟］以和予兮，指潜渊而为期。执眷眷之款实兮，惧斯灵之我欺。感交甫之弃言兮，怅犹豫而狐疑。收和颜而静志兮，申礼防以自持。于是洛灵感焉，徙倚彷徨，神光离合，乍阴乍阳。竦轻躯以鹤立，若将飞而未翔。践椒涂之郁烈，步蘅薄而流芳。超长吟以永慕兮，声哀厉而弥长。尔乃众灵杂遢，命俦啸侣，或戏清流，或翔神渚，或采明珠，或拾翠羽。从南湘之二妃，携汉滨之游女。叹匏瓜之无匹兮，咏牵牛之独处。扬轻袿之猗靡兮，翳修袖以延伫。休迅飞凫，飘忽若神，陵波微步，罗袜生尘。动无常则，若危若安。进止难期，若往若还。转眄流精，光润玉颜。含辞未吐，气若幽兰。华容婀娜，令我忘餐。于是屏翳收风，川后静波。冯夷鸣鼓，女娲清歌。腾文鱼以警乘，鸣玉鸾以偕逝。六龙俨其齐首，载云车之容裔，鲸鲵踊而夹毂，水禽翔而为卫。于是越北沚。过南冈，纡素领，回清阳，动朱唇以徐言，陈交接之大纲。恨人神之道殊兮，怨盛年之莫当。抗罗袂以掩涕兮，泪流襟之浪浪。悼良会之永绝兮。哀一逝而异乡。无微情以效爱兮，献江南之明。虽潜处于太阳，长寄心于君王。忽不悟其所舍，怅神宵而蔽光。于是背下陵高，足往神留，遗情想像，顾望怀愁。冀灵体之复形，御轻舟而上溯。浮长川而忘返，思绵绵督。夜耿耿而不寐，沾繁霜而至曙。命仆夫而就驾，吾将归乎东路。揽騑辔以抗策，怅盘桓而不能去。</p></div></header>
</body>
</html>

四、总结

没什么可以说的，其实可以通过js来写，只不过这样更加的方便罢了。很多网站都有这种视差，当然你看也表面一个播放框，内部循环播放然后还是利用视差效果，是可以做的很惊艳的。

这是另一种视差滚动也只用background-attachment:fixed这一个属性，当然了你一可以把中间的那条线，给他加加高度，不久出现了大众大型网站页面设计了。