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

当前位置:主页 > Html5库 > HTML5模板 > 使用6种不同视觉差特效的HTML5页面设计效果
使用6种不同视觉差特效的HTML5页面设计效果
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-10-10
    阅读:
简要教程

这是一款使用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滚动视觉差特效页面的一些截图效果。

滚动视觉差特效-1

滚动视觉差特效-2

滚动视觉差特效-3