使用6种不同视觉差特效的HTML5页面设计效果

这是一款使用6种不同的视觉差效果混合在一起来组成一个HTML5滚动视觉差特效页面。该视觉差特效分为：页面头部图片视觉差，文字视觉差，图片列表视觉差，图片画廊视觉差等，效果非常的炫酷。

使用方法

该滚动视觉差特效依赖于skrollr.js，这是一个制作视觉差效果的纯js插件，它十分强大，可以在手机上工作，并可以制作多种滚动视觉差效果。使用时要将其引入。

<script src="assets/skrollr.min.js"></script>                 
                

并对其进行初始化。

<script>
    skrollr.init();
</script>                  
                

Scrollr简介

在页面中添加了Scrollr插件之后，我们就可以在需要进行滚动视觉差的页面元素上添加data属性。下面是一个简单的例子，它会将一个DIV的颜色有红变为蓝。

<div data-bottom-top="background-color: rgb(255,0,0);" 
    data-center-center="background-color: rgb(0,0,255);">
</div>   
                

data-bottom-top属性指定动画的开始，data-center-center属性指定动画的结束。动画本身是通过CSS属性来完成的，Scrollr会将它们从一个状态平滑过渡到另一个状态。

在下载文件中有各个视觉差效果的单独例子，可以查看这些效果的data属性是如何编写的。

下面是该HTML5滚动视觉差特效页面的一些截图效果。