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样式
通过在分段 可以通过两个方法来控制分段的前后导航。例如: sonpScroll.js单页滚动插件的github地址为:https://github.com/talesluna/SONP元素上添加下面的class类来控制它们的行为。
no-scroll:在页面中移除滚动条。sonp-section:将元素定义为一个段落。sonp-small:定义分段的尺寸为200像素高。sonp-middle:定义分段的高度为页面的50%。sonp-full:定义分段的高度为页面的100%。sonp-parallax:定义分段使用视觉差效果。 方法
下一页
前一页









