好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

纯CSS视差滚动原理及实例

定义

网页设计中的视差来源于生活体验:在观察者运动时,离眼睛距离越远的物体运动速度越慢,离眼睛距离越近的物体运动速度越快。所谓的视差就是在视觉中物体运动速度的差别。

基础视差效果:纯CSS中的fixed

两个相邻物体一个静止,一个运动,两者的差别可以形成基础的视差效果。

在网页设计中基础的视差效果可以简单利用css中fixed实现。

注意:css中的fixed都是相对于可视区,包含background-attachment:fixed,虽然包含背景的块可能被覆盖移动了,但是出现时,背景图相对于窗口是固定的,随着滚动条也会出现视差效果。

background-attachment:fixed实现视差

background-attachment:scroll|fixed|inherit;

scroll:默认值。背景图像会随着页面其余部分的滚动而移动;

fixed:当页面的其余部分滚动时,背景图像不会移动;

inherit:规定应该从父元素继承 background-attachment 属性的设置。


在网页设计中经常采用固定背景,一般采取的是全局body的背景固定。

其实这就是一种视差,body上的文字等前景随滚动条滚动,背景一直固定不动。


当设置某一个块背景固定时,相邻的块与其背景形成的视差更加明显。

固定的背景会慢慢被吞噬或者展开,其中最好设置z-index,保证效果不出错。


实例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>迷津渡口-background-attachment:fixed实现视差滚动</title>
    <style>
	html,body{height:100%;padding:0;margin:0;}
	a{color:#b4d7a8;text-decoration:none;}
	div{padding:0;margin:0;}
	#maincontainer{position:relative;z-index:1;height:100%;}

	/*背景固定*/
	.bgfixed{position:relative;z-index:1;min-height:100%;background-attachment:fixed;background-size:cover;background-repeat:no-repeat;background-position:center center;}
	.bgfixed h1,.bgfixed h2{position:absolute;left:50%;top:50%;bottom:auto;right:auto;width:90%;max-width:1170px;text-align:center;font-size:30px;font-size:1.875rem;text-shadow:0 1px 3px rgba(0,0,0,0.3);color:white;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);}
	.bgimage1{background-image:url("http://image18.poco.cn/mypoco/myphoto/20161226/14/1848374802016122614500609.jpg?1920x1440_120");}
	.bgimage2{background-image:url("http://image18.poco.cn/mypoco/myphoto/20161226/14/18483748020161226145039027.jpg?1920x1280_120");}
	.bgimage3{background-image:url("http://image18.poco.cn/mypoco/myphoto/20161226/14/18483748020161226145107011.jpg?1920x1278_120");}

	/*背景滚动*/
	.bgscroll{position:relative;z-index:2;min-height:100%;line-height:1.6;}
	.innercontainer{width:90%;max-width:768px;margin:0 auto;}
	.innercontainer::before{content:'';display:table;clear:both;}
	.innercontainer::after{content:'';display:table;clear:both;}
	.innercontainer p{text-indent:2em;}
	.bgcolor1{color:#a6989a;background-color:#3d3536;}
	.bgcolor2{color:#3d3536;background-color:#99a478;}
	</style>
</head>

<body>
    <section id="maincontainer">
        <!-- bgfixed -->
        <div class="bgfixed bgimage1">
            <h1><a href="http://www.qingzz.cn/">迷津渡口</a></h1>
        </div>
        <!-- bgscroll -->
        <div class="bgscroll bgcolor1">
            <article class="innercontainer">
                <h2 style="text-align:center">再别康桥</h2>
                <h4 style="text-align:center">作者:徐志摩</h4>
                <p style="text-align:center;text-indent:0">轻轻的我走了,<br>正如我轻轻的来;<br>我轻轻的招手,<br>作别西天的云彩。<br><br>那河畔的金柳,<br>是夕阳中的新娘;<br>波光里的艳影,<br>在我的心头荡漾。<br><br>软泥上的青荇,<br>油油的在水底招摇;<br>在康河的柔波里,<br>甘心做一条水草!<br><br>那榆荫下的一潭,<br>不是清泉,是天上虹;<br>揉碎在浮藻间,<br>沉淀着彩虹似的梦。<br><br>寻梦?撑一支长篙,<br>向青草更青处漫溯;<br>满载一船星辉,<br>在星辉斑斓里放歌。<br><br>但我不能放歌,<br>悄悄是别离的笙箫;<br>夏虫也为我沉默,<br>沉默是今晚的康桥!<br><br>悄悄的我走了,<br>正如我悄悄的来;<br>我挥一挥衣袖,<br>不带走一片云彩。<br></p>
            </article>
        </div>
        <!-- bgfixed -->
        <div class="bgfixed bgimage2">
            <h2>诗意的栖居</h2>
        </div>
        <!-- bgscroll -->
        <div class="bgscroll bgcolor2">
            <article class="innercontainer">
                <h2 style="text-align:center">江南的雨</h2>
                <h4 style="text-align:center">作者:也恋红尘</h4>
                <p>曾经多少次在梦里,我撑着红色的绣伞,踱步在江南的烟雨中。花丛间,细风里,雨飘忽如雾,单身映荷莲。而今天当我置身这江南的雨中,却让我生出了楚楚可怜的愁绪, 阻绊了我闲逸的脚步,雨打湿了我的裤脚,更湿了我寂寞的心。</p>
                <p>远眺着雨中的青山,脸上的忧郁诉说着我的落寞。和风细雨不思归,站在烟雨朦胧中,我望穿了前世的轮回!我像失魂潦倒的诗人,不停的漫步在古朴的江南小巷,寻找着曾经梦中的江南美景。烟水一色,雾绕城连,还有雨天里秀发如丝,肤如凝脂,臂如白藕的江南女子。“今宵酒醒何处?杨柳岸.晓风残月!”“小桥流水人家!”</p>
                <p>我在江南的雨中长醉,多情的柳喃喃的笑,梅叶拂岸,不觉中我泪流满面。雨抚平我执意的悲伤,街边的绿草,也多情温柔地拍打着我的心房。这个时候,最怕见到比翼双飞的燕子;因为我会怀疑它们是故意在我的面前飞翔,故意要让我倾慕。它们嘲笑着我:醉入江南的雨季。却心怀一缕相思。双眼中,有一幅绝世的丹青。那是我梦中雨雾缭绕的思绪,江南的雨景,多想与君挽臂,唱一曲地久天长。却不想在我吟哦的惆怅中化成千古的憾事。</p>
                <p>江南的雨是婉约的 。 在唐诗宋词的意境里,几乎每一位诗人词家都曾借雨抒情,借雨舒怀。今人听雨,不必掉入那满怀愁绪,但独处当为听雨佳境。</p>
                <p>一茶一书,临窗闲坐,听雨点敲打着窗棂,丁冬作响,涓涓水流,顺檐而下,敲打在树叶上,沙沙低吟。窗外倘有数枝绿竹或几叶芭蕉亦或一棵梧桐,那就更是一种可遇不可求的意境。“自移一榻蕉窗下,更近丛篁听雨声”,动人诗情,兴人乐感,使人心旷神怡。“落花人独立,微雨燕双飞。”这该是怎样的人生境地?</p>
                <p>冬天的江南,不是梅雨,这雨穿着梦幻的轻纱缓缓而来,她素手轻扬抓住秋娘那流香的衣袖,羞羞的说:“若不能许我一世情长,请给我一场雨,一场爱恋已久的江南雨。”我在这里倚窗听雨,声色成韵,弹奏一曲云水禅心,仿佛一瞬间看到小桥流水、青石、雨巷、丁香飘落的忧伤、听到了乌篷船的橹声……清梦又在笔尖停靠,慢慢地续写一幅江南烟雨……更见唐风宋彩。</p>
                <p>天街小雨润如酥,草色遥看近却无”。江南的草色碧翠,娇弱柔嫩。江南的雨濛濛的,轻盈空灵、似雾似烟、如梦如幻。江南的雨是绣女手中的针线,一针一针绣壮山河,一线一线织满水媚。江南的雨是江南女子的发丝,她温柔、细腻、婉约、高贵,她在门前执一把木梳梳理散落的青丝,一梳,一梳,雨丝交织着发丝,丝丝莹润,根根关情,心上续起无限的柔情和诗意,渐次漾开一朵心事。一丝情萦似金银花般开放着,一段过往,一个故事在每一隅萌动、蔓延、蔓延在流年里。</p>
                <p>江南冬是北方的秋,是莺莺的曲,悠悠成溪。不信你看,淡淡的阴郁, 宛如一帘幽梦!稀稀疏疏,淅淅沥沥。雨丝成线,成帘,像似天上掉下的珠帘不慎遗落人间,媚了河山。江南的雨是洒落一地的花瓣雨,看看那地上细雨洗掉枫叶的朱红,冲走残花的娇躯,不正是画家笔下一幅写意江南吗?轻触岁月的凉薄,抚慰季节的萧瑟,雨的心柔柔的带一份情意留一束秋菊放置你心里。天冷了有菊相伴,寂寞了,有雨相连,秋风秋雨秋景在 心里, 依依不舍,泪水盈盈,落了一地相思,湿了伊莲的真心。</p>
                <p>江南的雨泠泠冽冽,淋淋漓漓,这时你可以不带雨具出门,让自己与冬雨尽情欢腾,走着走着迎面扑来潇潇的风,风不大,呼呼地卷着身子向前,一抹的凉意袭上心头,顿时觉得寒气欺身。雨或大或小,落在脸上身上,清爽,丝滑,落在我的面颊上,凉凉的,素素的,很舒服,像是不施粉黛的女子,素衣素服,素心素面,一切都素素的,总让你忍不住多看几眼,她是素的,内心散发着一股清新的纯洁气息,清洗着我心中的烦闷。</p>
                <p>江南的雨落在荷塘里,而此时的荷塘已经黄了叶,枯了隅,只剩下一汪碧水。看看那雨打水面的样子,让人生出太多的怜愁!江南是个多愁善感的地方,溶着我淡淡的思绪,想君,在江南的夜。思君在江南的冬,感君在江南的雨!多少次在梦里,与君挽臂而行,品味这人生的雨季,然后走出一片沼泽,在东方吐晓时,唱一曲地久天长!</p>
                <p>这一曲便是我人生的奢望。</p>
            </article>
        </div>
        <!-- bg-fixed -->
        <div class="bgfixed bgimage3">
            <h2>不悔梦归处 只恨太匆匆</h2>
        </div>
    </section>
</body>

</html>

背景高度大于内容高度时会出现漂亮的视差效果:


实例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>迷津渡口-background-attachment:fixed实现视差滚动</title>
    <style>
    html,body{height:100%;padding:0;margin:0;}
    a{color:#b4d7a8;text-decoration:none;}
    div{padding:0;margin:0;}
    #maincontainer{position:relative;z-index:1;height:100%;}

    /*背景固定*/
    /*这里设置了块高度仅为50%,从而形成不同的视差效果*/
    .bgfixed{position:relative;z-index:1;height:50%;background-attachment:fixed;background-size:cover;background-repeat:no-repeat;background-position:center center;}
    .bgfixed h1,.bgfixed h2{position:absolute;left:50%;top:50%;bottom:auto;right:auto;width:90%;max-width:1170px;text-align:center;font-size:30px;font-size:1.875rem;text-shadow:0 1px 3px rgba(0,0,0,0.3);color:white;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);}
    .bgimage2{background-image:url("http://image18.poco.cn/mypoco/myphoto/20161226/14/18483748020161226145039027.jpg?1920x1280_120");}
    .bgimage3{background-image:url("http://image18.poco.cn/mypoco/myphoto/20161226/14/18483748020161226145107011.jpg?1920x1278_120");}

    /*背景滚动*/
    .bgscroll{position:relative;z-index:2;min-height:100%;line-height:1.6;}
    .innercontainer{width:90%;max-width:768px;margin:0 auto;}
    .innercontainer::before{content:'';display:table;clear:both;}
    .innercontainer::after{content:'';display:table;clear:both;}
    .bgcolor1{color:#a6989a;background-color:#3d3536;}
    .bgcolor2{color:#3d3536;background-color:#99a478;}
    </style>
</head>

<body>
    <section id="maincontainer">
        <!-- bgscroll -->
        <div class="bgscroll bgcolor1">
            <article class="innercontainer">
                <h2 style="text-align:center">再别康桥</h2>
                <h4 style="text-align:center">作者:徐志摩</h4>
                <p style="text-align:center">轻轻的我走了,<br>正如我轻轻的来;<br>我轻轻的招手,<br>作别西天的云彩。<br><br>那河畔的金柳,<br>是夕阳中的新娘;<br>波光里的艳影,<br>在我的心头荡漾。<br><br>软泥上的青荇,<br>油油的在水底招摇;<br>在康河的柔波里,<br>甘心做一条水草!<br><br>那榆荫下的一潭,<br>不是清泉,是天上虹;<br>揉碎在浮藻间,<br>沉淀着彩虹似的梦。<br><br>寻梦?撑一支长篙,<br>向青草更青处漫溯;<br>满载一船星辉,<br>在星辉斑斓里放歌。<br><br>但我不能放歌,<br>悄悄是别离的笙箫;<br>夏虫也为我沉默,<br>沉默是今晚的康桥!<br><br>悄悄的我走了,<br>正如我悄悄的来;<br>我挥一挥衣袖,<br>不带走一片云彩。<br></p>
            </article>
        </div>
        <!-- bgfixed -->
        <div class="bgfixed bgimage2">
            <h2>诗意的栖居</h2>
        </div>
        <!-- bgscroll -->
        <div class="bgscroll bgcolor2">
            <article class="innercontainer">
                <h2 style="text-align:center">江南的雨</h2>
                <h4 style="text-align:center">作者:也恋红尘</h4>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;曾经多少次在梦里,我撑着红色的绣伞,踱步在江南的烟雨中。花丛间,细风里,雨飘忽如雾,单身映荷莲。而今天当我置身这江南的雨中,却让我生出了楚楚可怜的愁绪, 阻绊了我闲逸的脚步,雨打湿了我的裤脚,更湿了我寂寞的心。</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;远眺着雨中的青山,脸上的忧郁诉说着我的落寞。和风细雨不思归,站在烟雨朦胧中,我望穿了前世的轮回!我像失魂潦倒的诗人,不停的漫步在古朴的江南小巷,寻找着曾经梦中的江南美景。烟水一色,雾绕城连,还有雨天里秀发如丝,肤如凝脂,臂如白藕的江南女子。“今宵酒醒何处?杨柳岸.晓风残月!”“小桥流水人家!”</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我在江南的雨中长醉,多情的柳喃喃的笑,梅叶拂岸,不觉中我泪流满面。雨抚平我执意的悲伤,街边的绿草,也多情温柔地拍打着我的心房。这个时候,最怕见到比翼双飞的燕子;因为我会怀疑它们是故意在我的面前飞翔,故意要让我倾慕。它们嘲笑着我:醉入江南的雨季。却心怀一缕相思。双眼中,有一幅绝世的丹青。那是我梦中雨雾缭绕的思绪,江南的雨景,多想与君挽臂,唱一曲地久天长。却不想在我吟哦的惆怅中化成千古的憾事。</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;江南的雨是婉约的 。 在唐诗宋词的意境里,几乎每一位诗人词家都曾借雨抒情,借雨舒怀。今人听雨,不必掉入那满怀愁绪,但独处当为听雨佳境。</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一茶一书,临窗闲坐,听雨点敲打着窗棂,丁冬作响,涓涓水流,顺檐而下,敲打在树叶上,沙沙低吟。窗外倘有数枝绿竹或几叶芭蕉亦或一棵梧桐,那就更是一种可遇不可求的意境。“自移一榻蕉窗下,更近丛篁听雨声”,动人诗情,兴人乐感,使人心旷神怡。“落花人独立,微雨燕双飞。”这该是怎样的人生境地?</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;冬天的江南,不是梅雨,这雨穿着梦幻的轻纱缓缓而来,她素手轻扬抓住秋娘那流香的衣袖,羞羞的说:“若不能许我一世情长,请给我一场雨,一场爱恋已久的江南雨。”我在这里倚窗听雨,声色成韵,弹奏一曲云水禅心,仿佛一瞬间看到小桥流水、青石、雨巷、丁香飘落的忧伤、听到了乌篷船的橹声……清梦又在笔尖停靠,慢慢地续写一幅江南烟雨……更见唐风宋彩。</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天街小雨润如酥,草色遥看近却无”。江南的草色碧翠,娇弱柔嫩。江南的雨濛濛的,轻盈空灵、似雾似烟、如梦如幻。江南的雨是绣女手中的针线,一针一针绣壮山河,一线一线织满水媚。江南的雨是江南女子的发丝,她温柔、细腻、婉约、高贵,她在门前执一把木梳梳理散落的青丝,一梳,一梳,雨丝交织着发丝,丝丝莹润,根根关情,心上续起无限的柔情和诗意,渐次漾开一朵心事。一丝情萦似金银花般开放着,一段过往,一个故事在每一隅萌动、蔓延、蔓延在流年里。</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;江南冬是北方的秋,是莺莺的曲,悠悠成溪。不信你看,淡淡的阴郁, 宛如一帘幽梦!稀稀疏疏,淅淅沥沥。雨丝成线,成帘,像似天上掉下的珠帘不慎遗落人间,媚了河山。江南的雨是洒落一地的花瓣雨,看看那地上细雨洗掉枫叶的朱红,冲走残花的娇躯,不正是画家笔下一幅写意江南吗?轻触岁月的凉薄,抚慰季节的萧瑟,雨的心柔柔的带一份情意留一束秋菊放置你心里。天冷了有菊相伴,寂寞了,有雨相连,秋风秋雨秋景在 心里, 依依不舍,泪水盈盈,落了一地相思,湿了伊莲的真心。</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;江南的雨泠泠冽冽,淋淋漓漓,这时你可以不带雨具出门,让自己与冬雨尽情欢腾,走着走着迎面扑来潇潇的风,风不大,呼呼地卷着身子向前,一抹的凉意袭上心头,顿时觉得寒气欺身。雨或大或小,落在脸上身上,清爽,丝滑,落在我的面颊上,凉凉的,素素的,很舒服,像是不施粉黛的女子,素衣素服,素心素面,一切都素素的,总让你忍不住多看几眼,她是素的,内心散发着一股清新的纯洁气息,清洗着我心中的烦闷。</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;江南的雨落在荷塘里,而此时的荷塘已经黄了叶,枯了隅,只剩下一汪碧水。看看那雨打水面的样子,让人生出太多的怜愁!江南是个多愁善感的地方,溶着我淡淡的思绪,想君,在江南的夜。思君在江南的冬,感君在江南的雨!多少次在梦里,与君挽臂而行,品味这人生的雨季,然后走出一片沼泽,在东方吐晓时,唱一曲地久天长!</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这一曲便是我人生的奢望。</p>
            </article>
        </div>
    </section>
</body>

</html>

position:fixed实现视差

position设置为fixed可生成绝对定位的元素,相对于浏览器窗口进行定位,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定,不会随滚动条滚动。

普通元素随滚动条而动,position为fixed的元素不随滚动条而动,形成静止和运动的视差。


这种视差常常运用在顶部导航、底部导航、侧边辅助栏等需要一直放置在可视区域供访客随时可访问的区块。

position设置为fixed的同时需要设置z-index为一个较大的值,小指一般设置为999,保证其显示在最上层。


实例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>迷津渡口-position:fixed实现视差滚动</title>
    <style>
    html,body{width:100%;padding:0;margin:0;font-size:16px;background:rgba(194,240,194,.6) url(http://7xtj5b.com1.z0.glb.clouddn.com/qingzzcn_mijindukou/images/templateback.jpg) no-repeat fixed;background-size:cover;}
    a{color:#3a87ad;text-decoration:none;}
    a:link{color:#3a87ad;text-decoration:none;}
    a:hover{color:#3a87ad;text-decoration:none;}
    a:actived{color:#3a87ad;text-decoration:none;}
    a:visited{color:#3a87ad;text-decoration:none;}
    /*固定位置,添加z-index为999,保证最上层*/
    #header,#footer{position:fixed;z-index:999;left:0;height:70px;background-color:rgba(255,255,255,.8);}
    #header {top:0;width:100%;}
    /*footer的left和right都设置为0,margin-left和margin-right都设置为auto可居中*/
    #footer{bottom:0;left:0;right:0;width:800px;margin:0 auto;border-radius:20px;}
    #footer #nav{width:780px;margin:0 auto 30px;padding-left:20px;}

    #nav{width:800px;height:40px;margin:30px auto 0;}
    #nav ul{padding:0;margin:0;}
    #nav .link{float:left;margin-right:2px;list-style:none;}
    #nav a{display:block;height:40px;line-height:40px;padding:0 20px;font-size:22px;}
    #nav .link:hover,#nav .current{background-color:#f16e50;-webkit-transform:skew(-20deg);-moz-transform:skew(-20deg);-o-transform:skew(-20deg);transform:skew(-20deg);}
    #nav a:hover,#nav .current a{color:#fff;}
    #maincontent{position:relative;width:760px;padding:30px 20px;border-radius:20px;margin:90px auto;background-color:rgba(255,255,255,.8);}
    #maincontent p{text-indent:2em;}
    h2,h4{text-align:center;}
    
    </style>
</head>

<body>
    <header id="header">
        <nav id="nav">
            <ul>
                <li class="link current"><a href="http://www.qingzz.cn/">首页</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/sort/emlog">emlog</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/sort/php">php</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/sort/javascript">javascript</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/sort/ajax">ajax</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/sort/css">css</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/archive">归档</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/lyb">留言板</a> </li>
            </ul>
        </nav>
    </header>
    <section id="maincontent">
        <article>
            <h2>生命柔软,时光清浅</h2>
            <h4>作者:携一缕心殇,共话红尘凄凉</h4>
            <p>清晨,一轮橘红色的阳光从地平线上升起,给笼罩在氤氲迷雾的大地涂摸上了一层霞光,虽是冬天,浓重的白霜盖住了草丛、田垛、菜蔬、田间、原野。然而这丝丝缕缕黄灿灿的光亮驱散了雾障霜凝朦胧的早晨,尤如穴居久了的生灵凝聚的血液重又活跃起来了。阴冷了一段时日的冬天,乘着这明媚的亮光,几乎家家户户皆争先恐后洗衣搓被单,翻晒被褥,阳光是有味道的,晚上躺在接受了紫外线曝晒的被窝里,郁香浓烈,连做的梦都是那般的甜。</p>
            <p>时光的辗转,一如流水般匆匆,指尖的年华,渐渐瘦成了一弦眉弯。坐在光阴深处,捻一瓣心香,将时光走过留下的清喜翻了又翻,看了又看。 走过的路,留下的心情,在心间慢慢开出了一朵风雅,丰盈了时光,旖旎了幽香点点。流年中,一些人,来了又去,一些缘,聚了又散,,得得失失的行程,浮浮沉沉的心境,总有一些素念,如影随行;总有一些感悟,铭记心间。 岁月是一壶陈年的佳酿,越往时光的深处行走,愈会发觉, 岁月中不但有山长水远,蓑草绵绵,还隐藏着细微的静好, 包蕴着淡淡的清欢。生命的美好在于从走过的行程, 经历的风霜中不断走向成熟,待繁华过尽,心素如简,恬淡安然。</p>
            <p>不可以消沉,因为还有责任;心,不可以冰冷,因为还有朋友;爱,不可以绝望,因为还有亲人;命,不可以轻视,因为还有父母;泪,不可以轻流,因为还有自尊;情,不可以执着,因为还有伤痛;缘,不可以强求,因为还有离散;苦,不可以倾诉,因为还有自我;伤,不可以流露,因为还有疤痕;诺,不可以轻许,因为还有来世;人生,简简单单就好;生命,健健康康就好;生活,快快乐乐就好。</p>
            <p>人的一生中,总有一些不舍的情结,令人难以忘怀。人世间的沧桑变化,人情中的世故冷暖,尘世间的悲欢离合,生活中的酸甜苦辣咸。舍的情结,令人难以割舍。</p>
            <p>流年,是一首涓涓不息无字的歌,一直流淌在心田,那人那些事总是惦念不忘。还有或许那些情感,总是难以割舍。</p>
            <p>错过的风景总是难以忘记,人生中的遇见,交错,已然是刻骨铭心。时光,就在这念与不念之间渐行渐远,心就在路上,一半明媚,一半忧伤。有些情,虽然短暂,却已然走过心间;有些人,近在咫尺,却是一生无缘。总以为,不再想起,就不再染相思;总以为,不再念起,就不会再有忧伤;总以为,放不下所有,却会在眼泪掉下时转身离开,或者一个不经意间的转身就是永远。</p>
            <p>这些往事,将尽藏于心,这些过往,将尘封收藏,不再去问流水无情还是落花无意,也不再执着的找寻有你的天涯。</p>
            <p>愿将所有的牵念,化做深深的祝福;你一定要比我幸福,爱若相逢,记住已然足够。有多少光阴可以用来等待?有多少人值得回眸?慢慢的就会发现,一直执着的东西,想着想着就淡了;一直在乎的人,走着走着就散了,谁能执守一颗心,直到永远?谁愿牵一人手,走过沧海桑田?写过太多风花雪夜的缠绵;听过太多天长地久的期许,岁月中的一地阑珊,再也无法拾起,有一种相遇叫情深缘浅;有一种结局是曲终人散。</p>
            <p>爱过,痛过,哭过笑过,然后借一方晴空,拥抱阳光,继续坚强。放下该放下的,珍惜所拥有的,一笑而过,安然生活。一支蘸了胭脂的画笔,任你在时光的镜中怎样涂抹,也描摹不出最初的滋味,曾经的风景再美,也只是曾经而已。</p>
            <p>只有回不去的过去,没有过不完的当下,伤划在心底,痛过了,终会结茧,其实,我们每个人都比想象中的要坚强。手中的花茶寂寥无声,只留一手的余温,经历过后再想起,那些曾经唱过的歌,依然飘荡在心里;曾经爱过的人,却再也提不起恨,遇到了,莫问是缘是劫,爱过了,别问缘深缘浅,珍惜了,便是永远。在心中留一径浅香给彼此,若忆起,便是温暖。</p>
        </article>
    </section>
    <footer id="footer">
        <nav id="nav">
            <ul>
                <li class="link current"><a href="http://www.qingzz.cn/">首页</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/sort/emlog">emlog</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/sort/php">php</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/sort/javascript">javascript</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/sort/ajax">ajax</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/sort/css">css</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/archive">归档</a> </li>
                <li class="link"><a href="http://www.qingzz.cn/lyb">留言板</a> </li>
            </ul>
        </nav>
    </footer>
</body>

</html>

background-attachment:fixed和position:fixed结合实现背景滚动视差

文字使用块包裹配置位置为position:fixed,并置于可视区的中央,z-index置于最上层。

用div包裹不同的背景块,设置背景为background-attachment:fixed,z-index设置为1。

两者结合实现文字不动,而背景视差滚动的效果。


实例:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>迷津渡口-background-attachment:fixed和position:fixed实现背景视差滚动</title>
<style>
    html, body { height: 100%; padding: 0; margin: 0; }
    /*文字位置固定于最上层*/
    #title { position: fixed; width: 100%; height: 60px; line-height: 60px; z-index: 999; top: 0; right: 0; bottom: 0; left: 0; margin: auto; font-size: 30px; color: white; text-align: center; }
    /*div包裹背景图片滚动*/
    .bgfixed { position: relative; z-index: 1; min-height: 100%; background-attachment:fixed;}
    .bgimage1 { background-image: url("http://image18.poco.cn/mypoco/myphoto/20161226/14/1848374802016122614500609.jpg?1920x1440_120"); }
    .bgimage2 { background-image: url("http://image18.poco.cn/mypoco/myphoto/20161226/14/18483748020161226145039027.jpg?1920x1280_120"); }
    .bgimage3 { background-image: url("http://image18.poco.cn/mypoco/myphoto/20161226/14/18483748020161226145107011.jpg?1920x1278_120"); }
</style>
</head>

<body>
    <h2 id="title">不悔梦归处 只恨太匆匆</h2>
    <div class="bgfixed bgimage1"></div>
    <div class="bgfixed bgimage2"></div>
    <div class="bgfixed bgimage3"></div>
</body>

</html>

纯CSS实现的视差滚动效果挺好用的,下一篇将是结合js实现的视差滚动,敬请期待哦~

点赞1
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
daybel
 daybel 约 5 小时前回复
#122
<a href="http://www.bladeid.com/air-jordan-retro-4-kvinners-rosa-gull-schuhee">air jordan retro 4 kvinners rosa gull</a> <a href="http://www.bakomoms.com/nike-kyrie-2-noir-mass-scarpee">nike kyrie 2 noir mass</a> <a href="http://www.macrackmount.com/air-jordan-retro-13-dam%C3%A4nner-lila-scarpeg">air jordan retro 13 dam盲nner lila</a> <a href="http://www.martinsedacca.com/salomon-fellraiser-salg-kurpesa">salomon fellraiser salg</a> <a href="http://www.maxibymaxi.com/nike-free-5.0-gr%C3%A5-and-peach-schuhee">nike free 5.0 gr氓 and peach</a> <a href="http://www.slatervision.com/nike-huarache-ultra-grigio-maschio-scarpe-kurpesc">nike huarache ultra grigio maschio scarpe</a>
[url=http://www.daybel.com/]daybel[/url]
cnovas
 cnovas 2019-03-20 03:23回复
#121
<a href="http://www.colintilley.com/nike-roshe-run-blomstret-sort-guld-skol">nike roshe run blomstret sort guld</a> <a href="http://www.xthbgc.com/air-jordan-retro-28-blanc-bleu-ciel-chaussuresq">air jordan retro 28 blanc bleu ciel</a> <a href="http://www.iberishop.com/nike-kd-8-noir-rouge-chaussuresl">nike kd 8 noir rouge</a> <a href="http://www.karmacanix.com/air-jordan-cp3-gr%C3%BCn-wei%C3%9F-schuhei">air jordan cp3 gr眉n wei脽</a> <a href="http://www.tobepartridge.com/herren-asics-gel-noosa-tri-8-schwarz-gold-schuheh">herren asics gel noosa tri 8 schwarz gold</a> <a href="http://www.shopdunks.com/nike-kobe-9-kvinners-hvit-himmelen-bl%C3%A5-obuvj">nike kobe 9 kvinners hvit himmelen bl氓</a>
cnovas http://www.cnovas.com/
distisoft
 distisoft 2019-03-20 02:30回复
#120
<a href="http://www.flyboardab.com/adidas-zx-630-viola-oro-butyf">adidas zx 630 viola oro</a> <a href="http://www.frenchafwine.com/mennns-ralph-lauren-pony-polo-gr%C3%A5-r%C3%B8d-poloz">mennns ralph lauren pony polo gr氓 r酶d</a> <a href="http://www.katjehempel.com/nike-zoom-structure-19-femmes-vert-bleu-chaussuresf">nike zoom structure 19 femmes vert bleu</a> <a href="http://www.plumbnumber.com/nike-hypervenom-phelon-fg-plata-scarpee">nike hypervenom phelon fg plata</a> <a href="http://www.saeedlawyer.com/nike-womens-martavis-bryant-ash-name-number-logo-oakland-raiders-nfl-12-pullover-hoodie-nfls">nike womens martavis bryant ash name number logo oakland raiders nfl 12 pullover hoodie</a> <a href="http://www.witeducates.com/hommes-ralph-lauren-pony-shorts-bleu-rouge-polox">hommes ralph lauren pony shorts bleu rouge</a>
distisoft http://www.distisoft.com/
pobert
 pobert 2019-03-19 21:11回复
#119
<a href="http://www.sitopromo.com/nike-limited-mens-pittsburgh-steelers-84-antonio-brown-80th-anniversary-throwback-nfl-jersey-89.99-nflv">nike limited mens pittsburgh steelers 84 antonio brown 80th anniversary throwback nfl jersey 89.99</a> <a href="http://www.alexiancancer.com/asics-gel-kinsei-4-mens-green-shoesg">asics gel kinsei 4 mens green</a> <a href="http://www.monolitcenter.com/bon-march%C3%A9-nike-air-max-1-ultra-hommes-noir-shoesb">bon march茅 nike air max 1 ultra hommes noir</a> <a href="http://www.apexmartin.com/canada-goose-parajumper-parajumpersr">canada goose parajumper</a> <a href="http://www.beatsbybros.com/coach-bag-singapore-coachr">coach bag singapore</a> <a href="http://www.lepenequet.com/2014-15-real-madrid-2-varane-away-pink-soccer-long-sleeve-shirt-kit-nflv">2014 15 real madrid 2 varane away pink soccer long sleeve shirt kit</a>
pobert http://www.pobert.com/
dinerwaresf
 dinerwaresf 2019-03-19 18:06回复
#118
<a href="http://www.artoccsr.com/air-jordan-retro-3-all-hvit-kurpesf">air jordan retro 3 all hvit</a> <a href="http://www.bydecode.com/limited-nike-blue-mens-vernon-butler-alternate-jersey-nfl-92-carolina-panthers-vapor-untouchable-nflr">limited nike blue mens vernon butler alternate jersey nfl 92 carolina panthers vapor untouchable</a> <a href="http://www.chtalaska.com/dam%C3%A4nner-nike-flyknit-lunar-3-orange-lila-kurpesf">dam盲nner nike flyknit lunar 3 orange lila</a> <a href="http://www.fixlupusnow.com/nike-flyknit-lunar-1-squadron-bleu-urban-dictionary-schuhef">nike flyknit lunar 1 squadron bleu urban dictionary</a> <a href="http://www.hindikebol.com/nike-hyperdunk-2016-grigio-cielo-blu-obuvg">nike hyperdunk 2016 grigio cielo blu</a> <a href="http://www.motirealtor.com/jordan-size-us14-us15-verde-naranja-chaussuresa">jordan size us14 us15 verde naranja</a>
dinerwaresf http://www.dinerwaresf.com/
codedtalk
 codedtalk 2019-03-19 15:44回复
#117
<a href="http://www.katieirene.com/air-max-2015-blu-lagoon-drive-obuvd">air max 2015 blu lagoon drive</a> <a href="http://www.klimafeuer.com/nike-zoom-vomero-12-guld-brun-obuvg">nike zoom vomero 12 guld brun</a> <a href="http://www.kennethmarrin.com/air-jordan-phase-23-classic-oro-verde-schuhef">air jordan phase 23 classic oro verde</a> <a href="http://www.akashkataria.com/adidas-ultra-boost-wei%C3%9F-and-schwarz-yeezy-obuve">adidas ultra boost wei脽 and schwarz yeezy</a> <a href="http://www.fariselmasu.com/air-jordan-future-3m-vendita-butye">air jordan future 3m vendita</a> <a href="http://www.cleanopoly.com/adidas-neo-verde-bianca-obuvd">adidas neo verde bianca</a>
codedtalk http://www.codedtalk.com/
dianegrams
 dianegrams 2019-03-18 20:08回复
#116
<a href="http://www.germanxtube.com/nike-air-max-270-royal-bl%C3%A5-hvit-obuvk">nike air max 270 royal bl氓 hvit</a> <a href="http://www.eugenesklyar.com/lyst-coach-badlands-sunglasses-in-black-coachh">lyst coach badlands sunglasses in black</a> <a href="http://www.bamadu.com/nike-free-trainer-bianca-scarpej">nike free trainer bianca</a> <a href="http://www.gamekeyssale.com/bambini-rosa-nike-air-max-scarpei">bambini rosa nike air max</a> <a href="http://www.aktuelresim.com/minnesota-timberwolves-new-era-nba-logoman-59fifty-cap-hath">minnesota timberwolves new era nba logoman 59fifty cap</a> <a href="http://www.myshoesonsale.com/nike-zoom-winflo-3-bleu-rose-chaussuresh">nike zoom winflo 3 bleu rose</a>
dianegrams http://www.dianegrams.com/
barcosquecantan
 barcosquecantan 2019-03-16 22:12回复
#115
<a href="http://www.caninewingman.net/nike-air-max-zero-kvinners-sko-insert-obuvc">nike air max zero kvinners sko insert</a> <a href="http://www.caqueta.net/nike-air-max-2015-silber-grau-kurpese">nike air max 2015 silber grau</a> <a href="http://www.clubcombo.net/nike-zoom-kobe-5-sko-salg-kurpesa">nike zoom kobe 5 sko salg</a> <a href="http://www.cometwifi.net/air-jordan-schuhe-gr%C3%BCn-rosa-chaussuresb">air jordan schuhe gr眉n rosa</a> <a href="http://www.communityfm.net/nike-free-run-4.0-kvinners-gull-gr%C3%A5-obuve">nike free run 4.0 kvinners gull gr氓</a> <a href="http://www.coralbayconsulting.net/nike-air-yeezy-2-rosso-grigio-chaussuresa">nike air yeezy 2 rosso grigio</a>
barcosquecantan http://www.barcosquecantan.net/
kanaldtvizle
 kanaldtvizle 2019-03-16 21:07回复
#114
<a href="http://www.annabelpatton.com/new-balance-996-rosa-gituttio-butya">new balance 996 rosa gituttio</a> <a href="http://www.coskunusta.com/air-jordan-9-blanco-french-azul-flint-gris-obuvd">air jordan 9 blanco french azul flint gris</a> <a href="http://www.istenno.com/air-jordan-jumpman-team-or-argent-scarpec">air jordan jumpman team or argent</a> <a href="http://www.kvblues.com/air-jordan-12-sort-lyser%C3%B8d-schuhef">air jordan 12 sort lyser酶d</a>
kanaldtvizle http://www.kanaldtvizle.com/
blovese
 blovese 2019-03-16 04:16回复
#113
<a href="http://www.egyptmaritime.com/nike-shox-avenue-p%C3%BArpura-negro-zapatosk">nike shox avenue p煤rpura negro</a> <a href="http://www.erstube.com/coach-madison-embossed-medium-black-satchels-coachh">coach madison embossed medium black satchels</a> <a href="http://www.thecardplayer.com/adidas-neo-lazy-grey-orange-shoesj">adidas neo lazy grey orange</a> <a href="http://www.theweedaddict.com/air-jordan-melo-lyser%C3%B8d-s%C3%B8lv-skoq">air jordan melo lyser酶d s酶lv</a> <a href="http://www.thecampingman.com/hommes-nike-flyknit-lunar-2-vert-or-chaussuresl">hommes nike flyknit lunar 2 vert or</a> <a href="http://www.otuzbircek.com/hommes-asics-gel-noosa-tri-7-jaune-chaussuresq">hommes asics gel noosa tri 7 jaune</a>
blovese http://www.blovese.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸