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

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

一、准备代码


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


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

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

css视差滑动(阅读网站案例)_第1张图片

看到区别了没有,我并没有通过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)多放大一点不久可以把白边遮住了,当然还有很多办法。就你们自己寻找了。

三、完整代码


<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这一个属性,当然了你一可以把中间的那条线,给他加加高度,不久出现了大众大型网站页面设计了。

你可能感兴趣的:(css,html5)