zoukankan      html  css  js  c++  java
  • 滚动视差插件skrollr.js

    东西虽好,但也不能懒到自己一点都不去做总结,那么下方将会写出从网上找到,比较好的网址(应该是根据官网翻译的)。
    自己先做一个总结:这个插件兼容上做到了降级处理,虽然低端浏览器没有那么顺畅的效果,但是勉强也是能达到一定的效果。【客户想用低端的,那么便宜的效果实现了也是应该的对么?】
    差件首先需要初始化一下。然后应用中主要是通过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

    通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
  • 相关阅读:
    python自动化测试_6
    python自动化测试_5
    python自动化测试_4
    python自动化测试_3
    第一次个人编程作业
    第一次博客作业
    HangOver
    CSS实现动画特效导航栏
    CSS伪类整理笔记
    JavaScript闭包应用的整理
  • 原文地址:https://www.cnblogs.com/mcat/p/4788988.html
Copyright © 2011-2022 走看看