解剖视差滚动

2218


1467622656325759.jpg

如图,此为最经典常用的视图,大多视差网站都是在这个模型的基础上去做效果。通常情况下,视差设计中都会在页面中形成一个指示导航,这样做的目的很显然就是能让用户清楚知道自己所处的位置,也能通过指示很快定位到自己想要去的位置;如此一来就可以得出一个结论,视差设计中是需要以区域来划分要展示的产物,从而给用户的操作有一个连贯性和渐进性。其实在浏览网上的一些视差网站时就会多少有感触,他们更多的是以一种故事情节来吸引用户做向下操作的。


那么说回上图,现在我们区域划分好了,接下来要做的自然就是体现他们的层级顺序:从上到下依次递减,如我这里有3个区域那么就是3-2-1(其实这里的顺序是不定的,主要是你想做成什么样,在这里只是举个例子)。剩下的就是需要计算每个区域距离顶部的top值。这个要怎么去计算,很简单,直接获取scrollTop的坐标位置就结了;我们可以先来看一个简单的示例,这个示例我称它为背景视差,因为涉及的是背景的定位,还没有用到元素定位,所以这个很简单,你只要用CSS就能实现这一过程。


前面说只用CSS可以搞定,那DEMO1所涉及到的js其实是一个指示导航,可以暂先不理;这里最主要的实现体是css的background-attachment属性,这个属性在早期的版本就已经有了,只是在后来的CSS3版本中加入了一个新的取值(local),我们用得比较多的是fixed,其他的就可以暂时放一边,下面我们先了解一下该属性的取值:

=======================================================================

“<attachment> = fixed | local | scroll”


“fixed: 背景图像相对于窗体固定。”

“scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。”

“local: 背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)”

=======================================================================

整个页面的大体结构如下:

<div class="box box-1" id="n1">
<p>
<strong>第一屏</strong>
<span>
这里是一些风景描述<br />
这里是一些风景描述这里是一些风景描述
</span>
</p>
<i></i>
</div>
<div class="box box-2" id="n2">
<p>
<strong>第二屏</strong>
<span>
这里是一些风景描述<br />
这里是一些风景描述这里是一些风景描述
</span>
</p>
<i></i>
</div>
<div class="box box-3" id="n3">
<p>
<strong>第三屏</strong>
<span>
这里是一些风景描述<br />
这里是一些风景描述这里是一些风景描述
</span>
</p>
<i></i>
</div>
//接着着重讲一下行为方面的实现,因为在下集我们需要运用到这些东西,所以提前了解一下。
从这个指示导航开始吧,这东西是怎么实现的呢,其实很简单,前面讲了它的实现原理是需要通过划分区域来实现层级关系,这个指示导航就需要这个区域值来进行控制,总共我们有三个大区域,在滚动条进入到其中一个区域时触发条件成立,那么我们就可以在这个成立的基础上将指示点打到这个区域就可以了;看下代码就明了了
<div class="slidecount">
<ul>
<li class="focus"><a href="#n1">1</a></li>
<li><a href="#n2">2</a></li>
<li><a href="#n3">3</a></li>
</ul>
</div>

页面样式:

<style type="text/css">
body{font-family:"\5fae\8f6f\96c5\9ed1";}
.box{
position:relative;
height:939px; /* 此为元素背景图像实际高度 X 元素背景图像个数 */
margin:0 auto;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed; /* 使背景图像相对于窗体固定 */
background-size:cover; /* 取值auto | cover | contain */
/* 背景图像的真实大小 */
/* 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器 */
/* 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内 */
overflow:hidden;
text-align:center;
}
.box-1{
background-image:url(images/p1.jpg);
}
.box-2{
background-image:url(images/p2.jpg);
}
.box-3{
background-image:url(images/p3.jpg);
}
.box p{position:absolute;left:50%;top:50%;z-index:2;display:inline-block;width:300px;height:300px;margin:-150px 0 0 -150px;text-align:left;color:#fff;}
.box strong{display:inline-block;font-size:30px;padding:5px 10px;background:black;}
.box span{display:block;padding:10px 0;font-size:18px;line-height:25px;}
.box i{position:absolute;left:0;top:0;z-index:1;width:100%;height:939px;background:black;opacity:0.5;filter:alpha(opacity=50);}
.slidecount{position:fixed;right:10px;bottom:50%;z-index:1;}
.slidecount li{margin-bottom:10px;}
.slidecount li a{display:block;width:10px;height:10px;background:white;border:3px solid white;overflow:hidden;line-height:100px;border-radius:10px;}
.slidecount li a:hover{text-decoration:none;background:white;border:3px solid orange;}
.slidecount li.focus a{background:orange;border:3px solid orange;}
</style>

控制当前位置JQ代码:

<script type="text/javascript">
$(function(){
var oWinTop;
var oBoxH = $(".box").height();
var vLen = 0;
var vIndex = [];
$(".slidecount li").each(function(){
vLen = vLen + 1;
vIndex.push($(this).index());
});
$(window).scroll(function(){
oWinTop = $(window).scrollTop();
if(oWinTop >= 0 && oWinTop < oBoxH){
$(".slidecount li:eq("+vIndex[0]+")").addClass("focus").siblings("li").removeClass("focus");
}else if(oWinTop >= oBoxH && oWinTop < (oBoxH * vIndex[2])){
$(".slidecount li:eq("+vIndex[1]+")").addClass("focus").siblings("li").removeClass("focus");
}else{
$(".slidecount li:eq("+vIndex[2]+")").addClass("focus").siblings("li").removeClass("focus");
}
});
});
</script>

好了,背景视差的东西其实就那么些,当然这只是初步的有个了解,在下集会来说说另一种形式的视差滚动,顺带侃侃QQ浏览器官网的视差实现。