• jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件


    插件介绍:

      jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件。该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转、翻转、放大缩小等动画特效。使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果。

    基本用法

    $('.smoove').smoove(options);

    上面的代码会在class为 smoove 的元素上使用默认参数初始化 jQuery Smoove。

    你可以通过data-attributes属性来覆盖插件的默认参数,例如下面的例子:

    <div class="foo"></div>
    <div class="bar" data-move-x="-200px" data></div>
     
    <script src“/jquery/jquery.min.js"></script>
    <script src="/libs/jquery.smoove.min.js"></script>               
    <script>
      // 覆盖smoove的默认参数
      $(".foo, .bar").smoove({
        offset  : '15%',
        // moveX is 覆盖 ".bar" 的 -200px 
    moveX : '100px', moveY : '100px', }); </script>

    注意:在使用 data-attributes 属性时,要将属性的驼峰格式改为连字符格式,例如:moveX要改为data-move-x

    可选参数:

    名称 类型 默认值 描述
    offset integer or string 150 当对象滑动进入屏幕之前距离屏幕底部的距离,例如:10%。
    opacity integer (0-100) 0 当对象滑动进入屏幕之前的透明度。
    perspective integer 1000 对象的3D perspective,单位像素。
    transformOrigin string 50% 50% 对象transformOrigin,单位像素、百分比或默认关键字(left, right, top or bottom)
    skewY angle none 沿Y轴的2D倾斜度。
    move string none 沿X轴和Y轴2D移动的距离,例如:100px,50%
    move3d string none 沿X轴、Y轴和Z轴3D移动的距离,例如:10px,10px,10px
    moveX string none 沿X轴移动对象,例如:10px or 10%
    moveY string none 沿Y轴移动对象,例如:10px or 10%
    moveZ string none 沿Z轴移动对象,例如:10px or 10%
    rotate string none 2D旋转,例如:90deg
    rotate3d string none 沿X轴、Y轴和Z轴的3D旋转,例如:1,1,1,90deg
    rotateX string none 沿X轴的3D旋转,例如:90deg
    rotateY string none 沿Y轴的3D旋转,例如:90deg
    rotateZ string none 沿Z轴的3D旋转,例如:90deg
    scale decimal or string none X轴和Y轴方向上的2D缩放 (x,y),例如2.52,0.5
    scale3d string none 沿X轴、Y轴和Z轴方向上的3D缩放 (x,y,z),例如:2,3,0.5
    scaleX decimal none X轴方向上的缩放。
    scaleY decimal none Y轴方向上的缩放。
    skew angle none 沿X轴和Y轴方向上的2D倾斜,例如:90deg,90deg
    skewX angle none 沿X轴方向上的2D倾斜。
    skewY angle none 沿Y轴方向上的2D倾斜。
  • 相关阅读:
    043 抖音短视频爬取实战
    048 Python里面yield的实现原理
    047 Python面试知识点小结
    001 Glang实现简单分布式缓存
    046 算法的时间复杂度和空间复杂度计算
    042 使用Python远程监视多个服务器和数据库的状态,python,监控,同步
    041基于python实现jenkins自动发布代码平台
    045 chrome浏览器前端调试技巧
    STL学习
    Asio与Boost.Asio
  • 原文地址:https://www.cnblogs.com/moretry/p/4807558.html
Copyright © 2020-2023  润新知