這次帶給大家Emergence.js外掛的使用詳解,Emergence.js外掛程式使用的注意事項有哪些,以下就是實戰案例,一起來看一下。
Emergence.js 是一個輕量級,高效能的 JS 插件,用於偵測和操作瀏覽器中的元素。
這個插件被設計為允許根據瀏覽器中的可見性對元素進行操作。它使開發人員可以自由使用自己的 CSS 或JS 來查看動畫還是狀態的改變。它利用 HTML5 資料屬性而不是類別來簡化開發。 Emergence.js 是同類型中最輕,最相容的插件之一。
emergence.js 的特點
無需依賴其他元件
安裝
Emergence.js 的安裝非常的簡單。 npm的安裝方法如下:npm install emergence.js# 另外我們也可以直接下載它,在html檔中引進Emergence.js即可。
<script src="path/to/emergence.min.js"></script> <script> emergence.init(); </script>
如何使用
添加 data-emergence="hidden" 到您想要觀看的任何元素:< p class = “ element ” data-emergence = “ hidden ” > </ p >當元素在視窗內變得可見時,屬性將變為 data-emergence="visible" 。現在,您可以利用CSS來動畫元素:
.element [ data-emergence = hidden ] { / *隐藏状态* / } .element [ data-emergence = visible ] { / *可见状态* / }
自訂選項
# Emergence.js有許多選項可以自訂。下面是預設值:emergence.init({ container: window, reset: true, handheld: true, throttle: 250, elemCushion: 0.15, offsetTop: 0, offsetRight: 0, offsetBottom: 0, offsetLeft: 0, callback: function(element, state) { if (state === 'visible') { console.log('Element is visible.'); } else if (state === 'reset') { console.log('Element is hidden with reset.'); } else if (state === 'noreset') { console.log('Element is hidden with NO reset.'); } } });
選項說明
container:容器,預設情況下,元素的可見性將由視窗的視窗尺寸和X / Y滾動位置(設定為window)決定。但是,可以將其變更為自訂容器。例如:var customContainer = document.querySelector('.wrapper'); // www.xttblog.com emergence.init({ container: customContainer });Throttle:是一種防止與捲動和調整
事件大小相關的效能問題的方法。油門將創建一個小的超時,並在事件過程中每隔一定的毫秒量穩定地檢查元素的可見性。預設是250。
reset:確定資料屬性狀態是否在顯示後重設。 false如果您希望元素即使在離開視窗後仍保持其顯示狀態,請將其重設為。預設是true。 handheld:Emergence將為大多數手持裝置型號(如手機和平板電腦)進行檢查。設定false為時,插件將不會在這些裝置上運作。預設是true。 elemCushion:元素座標將決定在視窗內需要多少元素才算「可見」。 0.5的值將等於50%的元素需要可見。預設是0.15。 offsetTop, offsetRight, offsetBottom, offsetLeft:在視窗的任何邊上提供偏移量(以像素為單位)。如果您有一個固定的組件(例如標題),那麼這非常有用,您可以為標題的高度偏移相同的值。 100應用於的值offsetTop將意味著元素只有在距離視窗頂部大於100像素時才會被視為可見。所有的預設值是0。 callback:用於提供回調來確定元素何時可見,隱藏和重置。可能的狀態是visible,reset和noreset。 另外Emergence.js也提供了兩個高階方法emergence.engage();和emergence.disengage();他們的角色剛好相反。 Emergence.js依賴以下瀏覽器API:querySelectorAll # 為了支援IE8,請確保標準模式。 相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:以上是Emergence.js插件的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!