视差滚动-modernist主题修改

modernist这个主题设计,个人是非常喜欢。但是,总觉得缺少点什么,未免显得有点单调。因此又发扬折腾的精神,折腾一番。给其添加了滚动的背景,其实算是视差滚动吧,几张图片来源于一个视差滚动的库skrollr,这个库通过在HTML中添加额外的自定义属性作为相应数据。不过这里也没必要用什么库吧,毕竟只是为滚动几个背景,更何况已经载了JQuery,一些简单的操作亦可简单地去完成。

之前,一个面试,一个to do list的web应用,面试官向我介绍了他在这个应用中用到的各种各样的库。其实我挺好奇,这样一个应用,真的需要那么十几个库来操作吗?这些库是可以用来减少开发时间和开发成本,但是,这些库中大部分的特性都有用到吗?性能呢?载入这么多不卡吗?也许是我见识还比较短浅,可能有这样的偏见,Sorry。

言归正传,这里,我给页面添加了三个div,然后

body {
    position:relative;
}
#bg1, #bg2, #bg3 {
      position: absolute;
      top:0;
      left:0;
      height:100%;
      width:100%;
}
#bg1 {
      z-index:-1;
      background:url(images/bubbles.png) repeat transparent 0 0;
}
#bg2 {
      z-index:-2;
      background:url(images/bubbles2.png) repeat transparent 0 0;
}
#bg3 {
      z-index:-3;
      background:url(images/bubbles3.png) repeat transparent 0 0;
}

body设置relative是为了这几个div能达到body的height,不然其高度只有一个视口的高度。设置z-index,让这几个div“隐藏”到页面后面,而不至于遮挡显示区域。接下来,也就是背景的操作了。怎么动,或是,不动。不动的话,很简单,一个CSS属性background-attachment: fixed;即可解决。

而动的方案,就是怎样去动了。#bg1,#bg2,#bg3这三个div元素的背景圆依次减小,这里,我想要让这些背景图片向上,然后,“越大的圆”滚动越快。

var $bg1 = $("#bg1"), $bg2 = $("#bg2"), $bg3 = $("#bg3"), arr = [];
arr.push($bg1, $bg2, $bg3);
$(window).on('scroll',function(){
    var target,
        scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    for(var i = arr.length; i--; ){
        target = Math.floor(- scrollTop / ((i + 1) * 2));
        arr[i].css('background-position-y',target);
    }
});

于此,完成了,这样一个视差滚动。

PS:后又觉得意犹未尽,给导航栏以及标签云等部分的a元素添加了hover,稍微加了过渡属性 transition,导航栏部分颜色不同,原本打算用li:nth-child()伪类,但是Safari不支持。于是用了属性选择器。

新的一年嘛,多一点色彩,多一份美。关于这个博客的修改,到此告一段落,也挺满意的,再改也是明年的事了,呵呵,再几个小时就明年了。