东西虽好,但也不能懒到自己一点都不去做总结,那么下方将会写出从网上找到,比较好的网址(应该是根据官网翻译的)。

自己先做一个总结:这个插件兼容上做到了降级处理,虽然低端浏览器没有那么顺畅的效果,但是勉强也是能达到一定的效果。【客户想用低端的,那么便宜的效果实现了也是应该的对么?】

差件首先需要初始化一下。然后应用中主要是通过data-***来实现效果的。他会提供一个开始值与一个结束值。所有的动画效果都是在这两个区间值中去完成了。

  • 那么下方是来源于网络的一些资源

skrollr是一个原生的JavaScript视差滚动插件库,没有使用jQuery等第三方框架,能够兼容移动设备的Android + iOS系统和普通的PC浏览器,代码量极其少,压缩版本的插件只有12K,设计友好和方便,没有什么JavaScript高级的使用,只是简单的CSS和HTML。

初始化插件

首先你要有skrollr.min.js在你的文档的底部文件(在标签之前)然后调用skrollr.init()或者你可以把它放在里面,但一定要调用init()函数,一旦文件被加载(如jQuery的ready事件或者是在window.onload)。

<script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>
</body>

如果您使用的是require.js结构你的项目,你可以使用作为一个模块以及skrollr。

require(['skrollr'], function(skrollr){
var s = skrollr.init();
});

如果你熟悉CSS,你已经知道style属性。为了创建动画,你需要一些CSS样式。你使用HTML5的data-属性来定义元素之间切换的样式。

让我们换一个背景颜色div开始的#00F当滚动条的顶部和结束#F00当用户滚动500像素

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>

参考网址A

滚动视差插件skrollr.js的更多相关文章

  1. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  2. 字幕字体滚动插件——scroxt.js

    README scroxt.js Overview scroxt.js是一个字体滚动的插件库,包括视频弹幕滚动,直播弹幕.直播弹幕强制模式.单行水平左右滚动.文本垂直滚动上下,用于简单快捷生成滚动字体 ...

  3. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  4. 文字环绕和两栏自适应以及区域滚动插件iscroll.js

    一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字 ...

  5. 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  6. 滚动视差效果——background-attachment

    滚动视差效果的实现原理是在同一个页面上将页面元素分为多层,例如可以分为背景.内容.贴图层,在滚动页面的时候让三者滚动的速度不一,从而在人的视觉上能够形成一种立体的近似效果.最近在做一个项目wiki的时 ...

  7. 15+优秀的jQuery视差插件

    jQuery视差效果的应用越来越广泛了,今天就给大家分享一些优秀的jQuery视差插件,它们确实太棒了! 原文地址:http://www.goodfav.com/jquery-parallax-plu ...

  8. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  9. 功能强大的滚动播放插件JQ-Slide

    查看效果:http://keleyi.com/keleyi/phtml/jqplug/4.htmJQ-Slide插件功能强大,滚动方式自由多样全部滚动方式 方式一 方式二 方式三 方式四 方式五 方式 ...

随机推荐

  1. FSM Code Generator

    FSM Code Generator is a script code generator for Finite State Machine, it has a viaual designer bas ...

  2. 右键添加使用Sublime打开

    网上教程大多是教你怎么改注册表,有点麻烦. 我根据教程改完之后导出来供大家使用,更方便快捷. Windows Registry Editor Version 5.00 [HKEY_CLASSES_RO ...

  3. String基础

    一: String,StringBuffer与StringBuilder的区别??String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程 ...

  4. (Alpha)Let's-NABC

    效果图 NABC Need 在日常生活中我们也许经常有这样的疑问:在空闲时间内经常感到无处可去:抑或是有个心血来潮的想法却无人响应:或者困扰于自己狭小的交际圈,希望能有更多的朋友.(打个羽毛球没人一起 ...

  5. maven的pom.xml举例

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  6. BZOJ2749 HAOI2012外星人(数论)

    不妨把求φ抽象成把将每个位置上的一个小球左移一格并分裂的过程,那么即求所有球都被移到1号格子的步数. 显然要达到1必须先到达2.可以发现每次分裂一定会分裂出2号位的球,因为2以外的质数一定是奇数.以及 ...

  7. MT【112】单变量化

    评:降维,单变量是我们不懈的追求

  8. 洛谷P4180 [BJWC2010]次小生成树(最小生成树,LCT,主席树,倍增LCA,倍增,树链剖分)

    洛谷题目传送门 %%%TPLY巨佬和ysner巨佬%%% 他们的题解 思路分析 具体思路都在各位巨佬的题解中.这题做法挺多的,我就不对每个都详细讲了,泛泛而谈吧. 大多数算法都要用kruskal把最小 ...

  9. BZOJ刷题指南(转)

    基础(65) 巨水无比(4):1214.3816:2B题:1000A+B:2462:输出10个1 模拟/枚举/暴力(15):4063傻子模拟:1968小学生暴力:1218前缀和暴力:3856读英文:4 ...

  10. PyCharm远程开发配置及一些问题的解决方案

    PyCharm远程开发配置 具体请参考:https://www.jianshu.com/p/79df9ac88e96 Tips:必须要安装PyCharm专业版 实践过程中遇到的问题 背景 因项目需要, ...