教你什么叫AnimateScroll滚动

AnimateScroll是一个jQuery插件,使您能够滚动到页面的任何部分在风格上由刚调用animatescroll()与功能Id或Classname 要滚动到的元素。

<script src="https://raw.githubusercontent.com/yevhentiurin/animatedscrolljs/master/releases/jquery.animatedscroll-1.1.5.min.js">

这个插件需要两件事才能工作,一个是“jQuery库”,另一个是“animatescroll.js”文件

主要的滚动效果有:

// #section-2 表示id选择器,也可以换成class选择器

$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'}); 
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutBounce'}); 
$('#section-2').animatescroll({scrollSpeed:3000,easing:'easeOutElastic'}); 
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInQuad'}); 
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutQuad'}); 
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutQuad'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInCubic'}); 
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutCubic'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutCubic'}); 
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInQuart'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutQuart'}); 
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutQuart'}); 
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInQuint'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutQuint'}); 
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInSine'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutSine'}); 
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutSine'}); 
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutBack'});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值