渴切发布视差滚动解决方案"镨" pa.js

tyshymy
 tyshymy
发布于 2013年10月07日
收藏 95

渴切开源发布视差滚动解决方案"镨" pa.js。代码简约,快速上手。pa.js 取自视差滚动(parallax scrolling)视差英文单词的前两个字母。是一款简约视差滚动js解决方案,采用了灵活的html属性来自定义效果。不管你是不是js高手,你都可 以在一分钟内快速完成一个视差效果制作。

通过在html标签中引入before, after,speed,delay等属性。即可快速自定义视差滚动效果      
引入pa.js插件,基于jquery开发,所以还需要引入jquery库文件

 

<script src="jquery.js"></script>
<script src="pa.js"></script>    

通过在html中添加属性来实现自定义视差效果,代码片段:

 

 

<h1 class="pa" before="top:0;opacity:0" after="top:0;opacity:1;fontSize:100" speed="200" delay="0">pa.js</h1>      

 

注解:调用 class="pa"。 before="..." ,after="..." 为自定义视差滚动的属性,引号里面书写css语法代码(除了带下划线的属性例如:font-size:100 写为 fontSize:100)。
speed="1000" //动画效果时间,填写数字,1000为1秒
delay="1000" // 动画延时时间,填写数字,1000为1秒

演示地址:http://download.keqie.com/projects/pa.js/

下载地址:http://www.keqie.com/thread-9315-1-1.html

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:渴切发布视差滚动解决方案"镨" pa.js
加载中

最新评论(20

南湖船老大
南湖船老大

引用来自“开源码农”的评论

引用来自“南湖船老大”的评论

特烦这种类似瀑布流的效果,给人一种绝望和冗长的感觉

国人喜欢于布局紧凑、内容丰富的UI设计,也就是“高端大气上档次”

怎么拖都拖不到尾,而且想看看上面看到的内容,又要拖很久的滚动条,难受死了啊
开源无憾
开源无憾

引用来自“南湖船老大”的评论

特烦这种类似瀑布流的效果,给人一种绝望和冗长的感觉

国人喜欢于布局紧凑、内容丰富的UI设计,也就是“高端大气上档次”
chiefly
chiefly
六彼
笨蛋EGG
笨蛋EGG
我感觉我也用不上,不过赞美作者
Lofo
Lofo
这个挺不错的。支持
小雨0oo
小雨0oo
不错的东西,可以在这个基础上拓展到自已想要的效果。
s
ssn6
嗯,渴切的作者估计比这里很多人的水平要高多了,支持渴切!
乖猫的老公
乖猫的老公
虽然不用,但为作者的努力点赞
帖子列表
帖子列表
papapa
林林未
林林未
返回顶部
顶部