帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery简单全屏垂直滚动插件(Scrollify)

帝国模板之家 2020-11-23 网页特效 评论

插件介绍

scrolllify是一个jQuery垂直滚动插件,通过向下滚动页面时提供快照行为来增强单页滚动网站体验。

特征:

  • 使用箭头键、鼠标移动或触摸滑动在一组区域中滚动。

  • 向下/向上滚动时捕捉到滚动的页面。

  • 能隐藏滚动条。

  • 自动更新滚动的网址位置。

  • 支持回调。

  • 跨浏览器和跨设备。

  • 支持触摸事件。

使用方法

1.在html页面末尾加载最新版本的jquery库和jqueryscrolllify插件文件。

<script src="jquery.min.js"></script> 
<script src="jquery.scrollify.js"></script> 

2. 从CDN中加载jQuery easing插件,以获得简化选项(可选)。

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>  

3.为您的网站创建一组单页分区。

<section>
  Section 1
</section>

<section>
  Section 2
</section>

<section>
  Section 3
</section>

..

4. 插件初始化。

$(function() {
  $.scrollify({
    section : "section"
  });
});

5.插件默认选项。

$(function() {
  $.scrollify({

  // section should be an identifier that is the same for each section
  // A selector for the sections.
  section: "section", 

  // Scrollify lets you define a hash value for each section. 
  // This makes it possible to permalink to particular sections. 
  // This is set as a data attribute on the sections. 
  // The name of the data attribute is defined by 'sectionName'.
  sectionName: "section-name", 

  // A CSS selector for non-full-height sections, such as a header and footer.
  interstitialSection: "",

  // Define the easing method.
  easing: "easeOutExpo", 

  // Scrolling speed in milliseonds
  scrollSpeed: 1100,

  // A distance in pixels to offset each sections position by.
  offset : 0, 

  // A boolean to define whether scroll bars are visible or not.
  scrollbars: true, 

  // Target container
  target:"html,body",

  // A string of selectors for elements that require standard scrolling behaviour. 
  standardScrollElements: false,

  // A boolean to define whether Scollify assigns a height to the sections.
  setHeights: true,

  // Allows scrolling over overflowing content within sections
  overflowScroll:true,

  // Updates the browser location hash when scrolling through sections
  updateHash: true,

  // Allows to handle touch scroll events
  touchScroll:true,

  // callbacks
  before:function() {},
  after:function() {},
  afterResize:function() {},
  afterRender:function() {}

  });
});

6.api方法。

// Used to scroll to a particular section. 
// It can be parsed the index of the section, or the name of the section preceded by a hash.
$.scrollify.move("#name");

// Used to scroll to a particular section without animation. 
// It can be parsed the index of the section, or the name of the section preceded by a hash.
$.scrollify.instantMove("#name");

// Used to scroll to a panel that immediately follows the current panel.
$.scrollify.next()

// Used to scroll to a panel that immediately precedes the current panel.
$.scrollify.previous()

// Used to scroll to a panel that immediately follows the current panel, without animation.
$.scrollify.instantNext()

// Used to scroll to a panel that immediately precedes the current panel.
$.scrollify.instantPrevious()

// Removes all Scrollify events and removes set heights from the panels.
$.scrollify.destroy()

// The update methods recalculates the heights and positions of the panels.
$.scrollify.update()

// The current method returns the current section as a jQuery object.
$.scrollify.current()

// The disable method turns off the scroll snap behaviour so that the page scroll like normal.
$.scrollify.disable()

// The enable method resumes the scroll snap behaviour after the disable method has been used.
$.scrollify.enable()

// The isDisabled method returns true if Scrollify is currently disabled, otherwise false.
$.scrollify.isDisabled()
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言