https://github.com/kuangpf/ribbons

🌈 Add a flowing, smart ribbon to the background.
https://github.com/kuangpf/ribbons

background canvas

Last synced: 2 months ago
JSON representation

🌈 Add a flowing, smart ribbon to the background.

• Host: GitHub
• URL: https://github.com/kuangpf/ribbons
• Owner: KuangPF
• License: mit
• Created: 2018-01-17T02:54:57.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T06:12:36.000Z (almost 2 years ago)
• Last Synced: 2024-10-27T19:53:27.614Z (2 months ago)
• Topics: background, canvas
• Language: TypeScript
• Homepage: https://kuangpf.com/ribbons/example/index.html
• Size: 1.64 MB
• Stars: 13
• Watchers: 2
• Forks: 2
• Open Issues: 14
• Metadata Files:
  • Readme: README-zh_CN.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Ribbons

🌈 为背景加上一条飘逸、灵动的彩带 [demo](https://kuangpf.com/ribbons/example/index.html)

![](https://img.shields.io/npm/v/better-ribbons.svg?style=flat)

[![Build Status](https://travis-ci.org/KuangPF/ribbons.svg?branch=master)](https://travis-ci.org/KuangPF/ribbons)

[![codecov](https://codecov.io/gh/KuangPF/ribbons/branch/master/graph/badge.svg)](https://codecov.io/gh/KuangPF/ribbons)

[![](https://data.jsdelivr.com/v1/package/npm/better-ribbons/badge?style=rounded)](https://www.jsdelivr.com/package/npm/better-ribbons)

[![](https://img.shields.io/npm/dm/better-ribbons.svg?style=flat)](https://www.npmjs.com/package/better-ribbons)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)](http://makeapullrequest.com)

简体中文 | [English](./README.md)

### 📦 安装

**CDN**

```html

```

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

```html

  import Ribbons from 'https://cdn.jsdelivr.net/npm/better-ribbons/dist/ribbons.esm.js'

```

**npm**

```bash

npm i better-ribbons -S

```

### 🔨 使用

初始化一个 `Ribbons` 实例

```javascript

import Ribbons from 'better-ribbons'

const ribbonsInstacne = new Ribbons()

/* 自定义参数 */

const ribbonsOption = new Ribbons(

  {

    size: 100,

    alpha: 0.7

    zIndex: 0.5

  }

)

```

### 🍺 参数选项

- **size**

  - 说明：每块彩带的大小

  - 默认：90

  - 类型：`number`

  - 是否必填：否

- **alpha**

  - 说明：彩带的透明度

  - 默认：0.6

  - 类型：`number`

  - 是否必填：否

- **zIndex**

  - 说明：彩带的 `z-index` 属性

  - 默认：-1

  - 类型：number

  - 是否必填：否

### ☕️ 效果

![img](https://user-images.githubusercontent.com/20694238/62418615-ed5f1e80-b69f-11e9-898c-46e0cdcbf4c1.gif)

### LICENSE

MIT © [KuangPF](https://kuangpf.com/)