ribbon插件 在vuepress中的應用
💌 vuepress-plugin-ribbon-animation
專案地址：[http://www.zpzpup.com/blog]
vue vuepress vuepress-theme-reco vuepress-plugin-ribbon 感謝各位大佬 😁
📢 說明
放到開頭，這里重點說明下，大家如果有啥問題咱就直接提‘lssues’吧，后面朋友遇到相同問題大家也可以參考
🏠 專案截圖
📎 專案配置也是很簡單
npm install vuepress-plugin-ribbon-animation -D
or
cnpm install vuepress-plugin-ribbon-animation -D
大家目前去用1.1.3的版本 前面幾個是測驗用的版本 其他的大家就提lssues吧
// 只要把這個放進 config的plugins中就可以了 有木有很簡單
["ribbon-animation", {
size: 90, // 默認資料
opacity: 0.3, // 透明度
zIndex: -1, // 層級
opt: {
// 色帶HSL飽和度
colorSaturation: "80%",
// 色帶HSL亮度量
colorBrightness: "60%",
// 帶狀顏色不透明度
colorAlpha: 0.65,
// 在HSL顏色空間中回圈顯示顏色的速度有多快
colorCycleSpeed: 6,
// 從哪一側開始Y軸 (top|min, middle|center, bottom|max, random)
verticalPosition: "center",
// 到達螢屏另一側的速度有多快
horizontalSpeed: 200,
// 在任何給定時間，螢屏上會保留多少條帶
ribbonCount: 2,
// 添加筆劃以及色帶填充顏色
strokeSize: 0,
// 通過頁面滾動上的因子垂直移動色帶
parallaxAmount: -0.5,
// 隨著時間的推移，為每個功能區添加影片效果
animateSections: true
},
ribbonShow: false, // 點擊彩帶 true顯示 false為不顯示
ribbonAnimationShow: true // 滑動彩帶
}]
如果覺得很省事，幫到你了可以點個 ? star 感激不盡 😁😁😁 github: 鏈接：🚀.
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/249931.html
標籤：其他