中国最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2

Jquery集合

浏览声明

UI

分类插件

模态框

滚动轮播

拖拉排序

多选框

滚动条

Loading

移动端

提示框

功能性插件

瀑布流

  • CSS3立方体小照片
  • D3.js logo可视化库 D3.js
  • 图片处理

    banner特效

    带视觉差效果的平滑单页滚动jQuery插件

    阅读 (2115)

    ie兼容9
    插件描述:sonpScroll.js是一款可以制作带视觉差效果的平滑单页滚动特效的jQuery插件

    简要教程

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

    • 页面平滑滚动。

    • 定制分段section的高度。

    • 带分段圆点导航按钮。

    • 带视觉差效果。

    • 只需要一个JS文件。

    使用方法

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

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

    HTML结构

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

    <body class="no-scroll">
        <div class="sonp-section sonp-middle">
            <p>Section middle size (50%)</p>
        </div>
     
        <div class="sonp-section sonp-full sonp-parallax">
            <p>Section full size (100%) with parallax effect</p>
        </div>
     
        <div class="sonp-section sonp-small">
            <p>Section small size (200px)</p>
        </div>
    </body>

    CSS样式

    通过在分段<div>元素或<section>元素上添加下面的class类来控制它们的行为。

    • no-scroll:在页面中移除滚动条。

    • sonp-section:将元素定义为一个段落。

    • sonp-small:定义分段的尺寸为200像素高。

    • sonp-middle:定义分段的高度为页面的50%。

    • sonp-full:定义分段的高度为页面的100%。

    • sonp-parallax:定义分段使用视觉差效果。

     方法

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

    <a onclick="$('.sonp-section').nextPage()">下一页</a>
    <a onclick="$('.sonp-section').prevPage()">前一页</a>


    关闭
    程序员人生