建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

onepagescroll.js 纯 JS 的极简单页滚动效果插件

来源:易助科技网浏览量:37收藏

简介


onepagescroll.js是一个轻量级的 JS 库,它可以更容易地为单页网站、单页应用程序创建平滑的滚动效果,支持键盘导航和触摸事件。

(下载的附件中附有DEMO)


更多单页滚动插件:👉  [ 详情 ]


onepagescroll.js 纯 JS 的极简单页滚动效果插件-效果演示图


插件特点


轻量的

可自定义

无依赖项(纯js)

支持触摸事件



使用


1.  引入文件


<link href="onepagescroll.css" rel="stylesheet">
<script src="onepagescroll.js"></script>


2.  HTML


<div class="pages">
  <section>Section ONE</section>
  <section>Section TWO</section>
  <section>Section THREE</section>
  <section>Section FOUR</section>
  <section>Section FIVE</section>
</div>


3.  调用


调用顶部容器上的 onepagescroll() 函数


onepagescroll('div.pages');


使用以下选项自定义一页滚动效果


onepagescroll('div.page',{
  //child elements selector. use if you don't want to use section for page.
  pageContainer: 'section',     
  //determine css3 animation that will run when page changes
  //ex) 'ease', 'ease-out-in', 'cubic-bezier(0.2, 0.75, 0.5, 1.15)'
  animationType: 'ease-in-out', 
  //define how long each page takes to animate, 0 for off
  animationTime: 500,        
  //back to the last/first page when you scroll at first/last page   
  infinite: true,           
  //set show or hide pagination element.    
  pagination: true,             
  //allow up/page-up and down/page-down key for page scroll
  keyboard: true,           
  //determine direction of page scroll. options available are 'vertical' and 'horizontal'    
  direction: 'vertical'        
   
});



相关链接


GitHub 地址 :  https://github.com/blurfx/onepagescroll

演示地址 : https://www.jq22.com/yanshi653/ws

易助科技网效果演示地址:  http://demo.easyzone.net.cn/plugin/onepagescroll/index.html