当前位置:JS特效 » 其他 » 带视觉差效果的平滑单页滚动jQuery插件
 带视觉差效果的平滑单页滚动jQuery插件
如果您觉得内容不错,请分享:

插件介绍

sonpScroll.js是一款可以制作带视觉差效果的平滑单页滚动特效的jQuery插件。sonpScroll.js插件可以定制页面分段的高度,可以制作视觉差特效。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:42
简要教程

sonpScroll.js是一款可以制作带视觉差效果的平滑单页滚动特效的jQuery插件。sonpScroll.js插件可以定制页面分段的高度,可以制作视觉差特效。它的特点还有:

  • 页面平滑滚动。
  • 定制分段section的高度。
  • 带分段圆点导航按钮。
  • 带视觉差效果。
  • 只需要一个JS文件。

使用方法

在页面中引入jquery和sonpScroll.js文件。


                  
                
HTML结构

该单页滚动效果的基本HTML结构如下:


    

Section middle size (50%)

Section full size (100%) with parallax effect

Section small size (200px)

CSS样式

通过在分段

元素或
元素上添加下面的class类来控制它们的行为。

  • no-scroll:在页面中移除滚动条。
  • sonp-section:将元素定义为一个段落。
  • sonp-small:定义分段的尺寸为200像素高。
  • sonp-middle:定义分段的高度为页面的50%。
  • sonp-full:定义分段的高度为页面的100%。
  • sonp-parallax:定义分段使用视觉差效果。

方法

可以通过两个方法来控制分段的前后导航。例如:

下一页
前一页                  
                

sonpScroll.js单页滚动插件的github地址为:https://github.com/talesluna/SONP

Top