jQuery Smoove-华丽的CSS3滚动效果

所属分类:UI-滚动

 75249  484  查看评论 (10)
分享到微信朋友圈
X
jQuery Smoove-华丽的CSS3滚动效果 ie兼容10

使用方法

你需要调用jquery库、jquery.smoove.js和bootstrap.min.css到您的页面.

请确保jQuery在smoove.js之前加载。

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="../dist/jquery.smoove.js"></script>


通过JavaScript激活jQuery Smoove。

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


这将启动jQuery Smoove上的默认设置,选项可以通过data-attributes覆盖在单个对象中下面的例子。

<div class="foo"></div>
<div class="bar" data-move-x="-200px" data></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js"></script>
<script>
  // Attach Smoove to elements and set default options
  $(".foo, .bar").smoove({
    offset  : '15%',
    // moveX is overridden to -200px for ".bar" object
    moveX   : '100px',
    moveY   : '100px',
  });
</script>
相关插件-滚动

视觉滚动差效果

纯css3写的滚动视差效果
  滚动
 31840  357

jQuery.nicescroll美化滚动条

自定义scroll的样式,可配置
  滚动
 92609  505

jQuery简单的文字跑马灯特效

这是一款非常简单的jQuery文字跑马灯特效插件。该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动。
  滚动
 213789  358

文字轮播无缝滚动

文字轮播无缝滚动
  滚动
 73921  568

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

    Hello . 0
    2019/9/17 18:18:44
    我想问一下 官网上的一个transformY是怎么加上去的 没找到这个参数 回复
    yrre 0
    2018/8/23 17:35:14
    怎么样只执行一次,回去的时候不消失
        初衷.0
        2018/11/27 21:07:41
        同问同问。
        002-麦伦文化0
        2018/12/24 16:31:50
        只执行一次,可以使用wow.js
    回复
    生命不止,奋斗不息! 0
    2017/1/5 14:01:21
    好像不可以了,demo下载了也没反应,用chrome浏览器测试,版本 55.0.2883.95 (64-bit)
        小强6660
        2017/11/7 17:23:58

        可以用呀

    回复
    梦想VS现实 0
    2015/11/14 17:11:23

    esg 能共享下支持ie8效果的代码吗。愿意付费 联系QQ:48316283

    回复
    esg 0
    2015/8/27 19:08:10

    很好,已调整兼容IE8,非常感谢!

        ° ?? づ0
        2016/10/24 15:10:22
         能共享下么
    回复
    Legend 0
    2015/3/20 18:30:17
    低版本可以不兼容特效 但是样子不能变啊 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复