🌈 Add a flowing, smart ribbon to the background. demo
English | 简体中文
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
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
}
)
-
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
MIT © KuangPF