滚动视差插件skrollr-master

所属分类:其他-动画效果

 70697  455  查看评论 (10)
分享到微信朋友圈
X
滚动视差插件skrollr-master ie兼容8

单独的视差滚动的JavaScript库,支持手机(Android,iOS,等)大小只有12K。

设计师友好。即使不懂JavaScript。只需要简单的CSS和HTML知识即可轻松上手。

============以下是用户 只看不发了 提交的用法==============

使用方法

1、添加css,css文件在examples目录里

<link href="/build/css/fixed-positioning.css" rel="stylesheet" type="text/css" />
<link href="/build/css/skrollr.css" rel="stylesheet" type="text/css" />

2、添加js,js文件在dist目录里

<script type="text/javascript" src="/build/js/skrollr/skrollr.min.js"></script>

针对IE9以下的浏览器,还需添加skrollr.ie.min.js

<!--[if lt IE 9]>
	<script type="text/javascript" src="/build/js/skrollr/skrollr.ie.min.js"></script>
<![endif]-->

3、初始化

<script type="text/javascript">
      var s = skrollr.init({
      edgeStrategy: 'set',
	easing: {
		WTF: Math.random,
		inverted: function(p) {
			return 1-p;
		}
	}
      });
</script>

PS:修改div中的data属性可自定义div出现的高度

相关插件-动画效果

html5 canvas粒子星空

html5 canvas鼠标跟随粒子星空动画
  动画效果
 75583  739

cs3旋转动画实现地球周转

css33d效果旋转变形
  动画效果
 41807  439

导航水波纹点击效果外加滑动效果

导航水波纹点击效果外加滑动效果
  动画效果
 34373  422

HTML5 Canvas粒子效果文字动画特效(酷!)

HTML5 Canvas粒子效果文字动画特效
  动画效果
 124610  1272

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    遥远的她。 0
    2017/11/27 10:55:21
    爱花365网 0
    2017/6/27 10:30:46

    不错的源码 谢谢分享

    回复
    古锥楞 0
    2017/3/29 14:00:16

    有没有办法让移动端也试用,急!!!

        ?╊?σν? м?0
        2020/11/27 18:20:05
        同问
    回复
    i.Uka 0
    2016/7/21 17:07:49
    还是不懂用- - 对于设计师不懂js来说 回复
    汉斯 0
    2016/2/26 12:02:59
    IE8支持不是很好 回复
    匿名者 0
    2015/12/2 16:12:09

    不太好,移动端不太适用

    回复
    ??oA 0
    2015/11/10 2:11:39

    我找了很久终于找到了这个效果了!!!

    回复
    12:44 0
    2015/10/19 19:10:37
    济公 0
    2014/6/17 10:36:00
    同求详细使用方法,感觉不是太懂 回复
    插件王子 0
    2014/5/5 14:38:00

    网站很好 建议下方的使用方法有个详细的板块

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复