故事说起在一个冰冷幽暗的夜晚上,我正思考的十分重要的人生问题,这周末该去那里happy好呢?是宅在家里好呢,或者宅在家里好呢,还是宅在家里好呢?这时,万年隐身的QQ竟然浮起浅色聊天框,我去!不得了,居然是女神主动联系我,女神一定是因为我俊朗的五官,185的模特身材而深深地迷恋上我了,呵呵呵呵呵呵。
“诶,你在干嘛呢?”
“没啊,在思考人生。” 难道这是要约我的节奏吗?在妹子前必须保持冷静。
“那个这周我要搞一个游戏宣传的页面,设计师说用【视差滚动】的效果,你能做个demo页给我看看?”
。。。。。。。。。没事!虽然跟我预想有点出入,但女神这是在考验我!
【定义】
所谓的视差滚动,就是在页面滚动过程中,多层次的元素进行不同程度的位移,带来立体的视差效果。还有很多的奇思妙想的展现方式,都是滚动页面触发的,也可称为视差滚动。视差滚动里面最基础的就是切换背景,这点其实一个CSS就满足了
【视差滚动原理一】
background-attachment: fixed || scroll || local
默认是scroll,内容跟着背景走,而视差滚动页面里用fixed,背景相对页面固定而不跟内容滚动。
很快地我就做出了一个demo出来,还特意配上几张优雅的图片和极富内涵的词句,女神一定会因为我的文采而爱上我的,而且,那些看似简单的“我是内容”不断重复,其实只要细心就会发现里面隐藏着我的表白,情商如此之高的女神,一定会发现,然后我们就可以幸福的在一起,在爱情的滋润下,我很快就能升职加薪,当上总经理,出任CEO,赢取白富美,走上人生巅峰。哈哈哈哈哈哈哈哈,诶?好像不用赢取白富美,那就挑战白富美。
demo1_base
“咦,怎么是静态的,能不能帮我做个会动的那种的视差滚动,麻烦了么么哒~”
。。。。。。居然完全没有留意到我溢出的文采和隐藏的表白。。。。。没事!虽然跟我预想有点出入,但女神这是在考验我!
【视差滚动原理二】
女神想要些更加丰富的效果,也对,像我这么内涵有档次的程序员,当然要来写非常酷的动画效果。
在原理的demo1的基础上,我在scroll事件上添加一些动画事件。
01 |
window.addEventListener( 'scroll' , function (e){ |
02 |
var scrollTop = window.scrollY; |
03 |
if (scrollTop > 0 && scrollTop < articleHeight){ |
04 |
title1.classList.add( 'title-anim' ); |
05 |
content1.classList.add( 'content-anim' ); |
06 |
} else if (scrollTop >= articleHeight && scrollTop < articleHeight*2){ |
07 |
title2.classList.add( 'title-anim' ); |
08 |
content2.classList.add( 'content-anim' ); |
09 |
} else if (scrollTop >= articleHeight*2 && scrollTop < articleHeight*3){ |
10 |
title3.classList.add( 'title-anim2' ); |
11 |
content3.classList.add( 'content-anim' ); |
视差滚动的表现方式非常多,滚动到页面某个值后会触发一个CSS3动画,这也是众多视差滚动中常见的一种。
demo2_anim
(这个Demo使用了CSS3动画,请使用现代浏览器查看)
【视差滚动原理三】
视差滚动中最突出的内容就是立体的视差效果,最具有说明代表性的就是超级玛丽的游戏场景
当玩家操作马里奥移动时,水管和墙块更马里奥在同一水平层,移动速度最快。天上的白云为中层背景图,移动速度中等。而小山丘是最远的背景图,移动速度最慢。三个层次内容按不同速度移动,就会带来一种立体的视差效果。
在dom结构上,把同一层的dom元素都放到一个div里面,html结构如下。
在页面滚动过程中,我们获取页面的scrollTop的值,根据不同参数值去设置各自scene的top值,这样滚动页面的时候,不同的速度就出来了
01 |
var sceneBack = document.getElementById( 'scene_back' ), |
02 |
sceneCenter = document.getElementById( 'scene_center' ), |
03 |
sceneFront = document.getElementById( 'scene_front' ); |
08 |
addEvent(window, 'scroll' ,onScroll); |
12 |
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; |
13 |
sceneBack.style.top = old_top1+scrollTop*.9+ 'px' ; |
14 |
sceneCenter.style.top = old_top2+scrollTop*.7+ 'px' ; |
15 |
sceneFront.style.top = old_top3+scrollTop*.3+ 'px' ; |
18 |
function addEvent(eventTarget, eventType, eventHandler) { |
19 |
if (eventTarget.addEventListener) { |
20 |
eventTarget.addEventListener(eventType, eventHandler, false ); |
22 |
if (eventTarget.attachEvent) { |
23 |
eventType = "on" + eventType; |
24 |
eventTarget.attachEvent(eventType, eventHandler); |
26 |
eventTarget[ "on" + eventType] = eventHandler; |
由于女神在等待的关系,代码有点搓,也没有做兼容性,但是原理就是这样的。
demo3_scene
这个Demo在非IE6/7下都能查看,只是,IE8的效果并不太好。Firefox效果最好。
这里还有个特殊情况:在Chrome下查看这个Demo请拖动滚动条,而不是滚动鼠标。原因是Chrome浏览器对鼠标的滚动做了优化处理,滚动一个齿轮幅度,其他浏览器是触发十几次scroll事件,而Chrome只会触发一次。只有一帧的动画,大家想想就知道。这里可以考虑加入缓动动画,本Demo是基于原理说明和泡女神,具体可以留意下一篇博客优化篇
两个demo完事后,很快地就交到女神手上,这次我在demo特意多加上几句(真的是几句?)表白,女神这次一定能发现的。而且,pokemon都出来帮忙了,精心挑选的初代御三家来卖萌,女神一定被萌到在我广阔的胸怀,然后爱上我,我在爱情的滋润下,我很快就会升职加薪,当上总经理,出入CEO,挑战白富美,走上人生巅峰。哈哈哈哈哈哈啊哈。
“啊,欧巴好厉害哟~最后一次拜托你,能不能做个滚动的时候角色上下出现的效果。弄完我请你吃饭哟。”
。。。。。。居然还是没有留意我的表白。。。但是,女神要请我吃饭了,想想都有点激动。不过请吃饭这事,应该反过来才对,我无数次幻想这样的场景:我在万众瞩目下,大喊“女神我暗恋你好久了,我好喜欢你!我一定会追到你,然后我要带你去吃KFC。”
【视差滚动一种效果实现】
上下颠倒出现,这个跟原理三是一样的,唯独就是不是所有的元素都是往上升,而是一些元素上升,一些元素下沉。在计算top值的时候,不是“加上”,变成“减去”scrollTop就会有相应的效果。亲自试了一下,效果就出来了,但是很明显有个问题,就是上升元素和下沉元素在同一水平线上的时候,这时却不是在页面正中间。这时候思考一下问题所在就好了。计算top的公式是下面
1 |
newTop1 = oldTop1 + scrollTop * x1 ; (x是个系数) |
2 |
newTop2 = oldTop2 - scrollTop * x2 ; (x是个系数) |
我们假设,oldTop为-1000,oldTop2为1000,我们希望滚动到500的时候,两者在同一水平线上,这时newTop1和newTop2都相同为500才能再页面中心(注意不是0,自个想想就明白)。这样得到x1为2,x2为0。代码如下。
01 |
var sona = document.getElementById( 'sona' ), |
02 |
ahri = document.getElementById( 'ahri' ); |
06 |
addEvent(window, 'scroll' ,onScroll); |
10 |
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; |
11 |
sona.style.top = old_top1+scrollTop*2+ 'px' ; |
12 |
ahri.style.top = old_top2-scrollTop*0+ 'px' ; |
15 |
function addEvent(eventTarget, eventType, eventHandler) { |
16 |
if (eventTarget.addEventListener) { |
17 |
eventTarget.addEventListener(eventType, eventHandler, false ); |
19 |
if (eventTarget.attachEvent) { |
20 |
eventType = "on" + eventType; |
21 |
eventTarget.attachEvent(eventType, eventHandler); |
23 |
eventTarget[ "on" + eventType] = eventHandler; |
所以,如果在多种效果混合使用,希望滚动到某地方的时候,某两个dom元素在同一水平线上且在页面中间,代入参数,得到不同x1,x2即可。
demo4_reverse
这次精挑细选两个LOL美女来做素材,女神就可以看出我在游戏方面,和游戏方面,还有游戏方面的知识渊博。这次的任务非常简单,我很快的Q回女神。女神也表示了感激之情,并约定在那里吃饭。我们在Q上轻松的聊了起来。气氛也越来越好,看来时机成熟了。
我“聊到这么晚了,差不多要睡了”
女神“嗯,都很晚了,今天晚上超冷”
我“妹子,话说你需不需要一个又会暖被子,又会陪着你聊天的男朋。。。”
女神“哈哈,不用了。我男朋友都趴在我身上,看着我跟你聊天很久了。
。
。。
。。。
。。。。。
真是一个感动的爱(diao)情(si)故事
评论区