帶視覺差效果的平滑單頁滾動jQuery插件

2021-10-18 16:24 更新

ie兼容9
插件描述：sonpScroll.js是一款可以制作帶視覺差效果的平滑單頁滾動特效的jQuery插件

簡要教程

sonpScroll.js是一款可以制作帶視覺差效果的平滑單頁滾動特效的jQuery插件。sonpScroll.js插件可以定制頁面分段的高度，可以制作視覺差特效。它的特點還有：

  • 頁面平滑滾動。

  • 定制分段section的高度。

  • 帶分段圓點導(dǎo)航按鈕。

  • 帶視覺差效果。

  • 只需要一個JS文件。

使用方法

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

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

HTML結(jié)構(gòu)

該單頁滾動效果的基本HTML結(jié)構(gòu)如下：

<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：定義分段使用視覺差效果。

 方法

可以通過兩個方法來控制分段的前后導(dǎo)航。例如：

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


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號