使用jQuery Smoove制作漂亮的图片滚动效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

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

Smoove 官方给的案例样式非常简单，这里站长自己手写了一个jQuery-smoove CSS3动画效果

关键js与说明

初始化菜单使用的js代码非常简单。只需要几句话就可以实现CSS3动画效果功能。

<script type="text/javascript" src="js/jquery.smoove.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.productul li a').smoove({ offset: '40%' });
        //offset 当对象滑动进入屏幕之前距离屏幕底部的距离
    })
</script>

Smoove插件拥有更多的参数设置

可选参数说明

  • offset integer or string 150 当对象滑动进入屏幕之前距离屏幕底部的距离，例如：10%。

  • opacity integer (0-100) 0 当对象滑动进入屏幕之前的透明度。

  • perspective integer 1000 对象的3D perspective，单位像素。

  • transformOrigin string 50% 50% 对象transform的Origin,单位像素、百分比或默认关键字(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.5或2,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倾斜。