ribbon插件 在vuepress中的應用

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: 鏈接：🚀.