KuangPF / ribbons

🌈 Add a flowing, smart ribbon to the background.

Ribbons

🌈 Add a flowing, smart ribbon to the background. demo

English | 简体中文

📦 Install

CDN

<script src="https://cdn.jsdelivr.net/npm/better-ribbons/dist/ribbons.min.js"></script>

If you are using native ES Modules, there is also an ES Modules compatible build:

<script type="module">
  import Ribbons from 'https://cdn.jsdelivr.net/npm/better-ribbons/dist/ribbons.esm.js'
</script>

npm

npm i better-ribbons -S

🔨 Usage

Initialize a Ribbons instance

import Ribbons from 'better-ribbons'

const ribbonsInstacne = new Ribbons()
/* custom option */
const ribbonsOption = new Ribbons(
  {
    size: 100,
    alpha: 0.7
    zIndex: 0.5
  }
)

🍺 Options

• size

  • Description: The size of each ribbon
  • Default: 90
  • Type: number

• alpha

  • Description: ribbon transparency
  • Default: 0.6
  • Type: number

• zIndex

  • Description: ribbon 'z-index` attribute
  • Default: -1
  • Type: number

☕️ Screenshot

LICENSE

MIT © KuangPF