給你的網站添加炫酷的動畫注釋
前置
rough-notation 用於在網頁上創建注釋並設置注釋動畫的小型 JavaScript 庫。它還可以應用在一些常見前端框架中,比如 Vue、React、 Svelte、Angular 甚至 Web Component。我把它應用在我創建的部落格園皮膚中,比如你可以看見頭部導航條中的部落格昵稱有一個下劃線。下面是它可以實現的基本效果,點擊按鈕試一試吧。
使用
npm install --save rough-notation
通過將元素傳遞到 annotation
來創建對象,以及通過配置來描述樣式。擁有 annotation
對象後,可以調用annotation.show()
顯示。
import { annotate } from 'rough-notation';
const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline' });
annotation.show();
通過 Group 創建多個動畫注釋:
import { annotate, annotationGroup } from 'rough-notation';
const a1 = annotate(document.querySelector('#e1'), { type: 'underline' });
const a2 = annotate(document.querySelector('#e3'), { type: 'box' });
const a3 = annotate(document.querySelector('#e3'), { type: 'circle' });
const ag = annotationGroup([a3, a1, a2]);
ag.show();
參數
創建 annotation
時,將傳遞一個配置。配置只有一個必填欄位,即注釋的欄位。但是,您可以通過多種方式配置。type
類型
這是一個必填欄位,設置注釋樣式。
- underline:此樣式在元素下方創建粗略下劃線。
- box:此樣式在元素周圍繪製一個框。
- corcle:此樣式在元素周圍繪製一個圓圈。
- highlight:此樣式創建高光效果,就像用熒光筆標記一樣。
- strike-through:此樣式通過元素繪製水平線。
- crossed-off:此樣式在元素上繪製一個”X”。
- bracket:此樣式圍繞元素(通常是文本段落)繪製一個括弧。默認情況下,在右側,但可以配置為任何或全部的左,右,上,下。
animate
在注釋時打開/關閉動畫的布爾屬性。默認值為 true
。
animationDuration
動畫的持續時間(以毫秒為單位)默認值為 800ms
。
color
表示注釋草圖顏色的字元串值,默認值為 currentColor
。
strokeWidth
注釋描邊寬度。默認值為 1。
padding
在元素和繪製注釋的大致地點之間填充。可以將值設置為類似於 CSS 樣式填充或只是數組。5 top left right bottom``[top, right, bottom, left]
[top & bottom, left & right]
。
multiline
僅適用於內聯文本。若要注釋多行文本,請將此屬性設置為 true
。
iterations
配置迭代次數。默認情況下,注釋在兩次迭代中繪製,例如,下劃線時,從左到右繪製,然後從右到左繪製。
brackets
配置元素的哪一側為支架。值可以是字元串或字元串數組,每個字元串都是這些值之一:top left right bottom
。繪製支架時,默認值為 right
。
它還提供一些事件,供您靈活調用,這裡不展開描述,可以去 Github 看一看。
我的使用
notation/index.js
import { annotate, annotationGroup } from 'rough-notation'
import { pageName as currentPage } from '@tools'
import './index.scss'
const pageName = currentPage()
const group = []
const annotateList = [
{
page: 'all',
selector: '#Header1_HeaderTitle',
config: {
type: 'underline',
color: '#2196F3',
},
},
{
page: 'post',
selector: '#cb_post_title_url',
config: {
type: 'highlight',
color: '#FFF176',
},
},
{
page: 'post',
selector: 'mark',
config: {
type: 'highlight',
color: '#FFD54F',
},
},
{
page: 'post',
selector: 's',
config: {
type: 'strike-through',
color: '#FF0000',
},
},
{
page: 'post',
selector: 'u',
config: {
type: 'underline',
color: '#2196F3',
},
},
{
page: 'post',
selector: 'strong',
config: {
type: 'circle',
color: '#F44336',
},
},
]
const buildGroup = items => {
for (let { selector, page, config } of items) {
if (page === 'all' || pageName === page) {
const element = document.querySelectorAll(selector)
if (!element.length) return
if (element.length === 1)
group.push(annotate(document.querySelector(selector), config))
if (element.length > 1) {
element.forEach(function(item) {
group.push(annotate(item, config))
})
}
}
}
}
const notation = (customList = annotateList) => {
buildGroup(customList)
const ag = annotationGroup(group)
setTimeout(() => {
ag.show()
}, 1000)
}
export default notation
在創建的部落格園皮膚使用時,只需要 import notation,可以傳入一些元素列表或者使用默認的列表。