Son CV dans un terminal web en Javascript!
https://terminal-cv.gregandev.fr
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
greglebreton
4e8a693745
|
2 years ago | |
---|---|---|
.. | ||
dist | 2 years ago | |
LICENSE | 2 years ago | |
README.md | 2 years ago | |
package.json | 2 years ago |
README.md
fireworks-js
A simple fireworks library! | fireworks.js.org
Features | Demo | Installation | Usage | Options
Features
- 🔥 Zero dependencies
- ⚙️ Flexible configuration
- 📦 Lightweight (~3.0kB gizpped)
- ☁️ Server-side rendering compatibility
- 📜 Supports TypeScript type definition
Demo
You can play with fireworks-js
on fireworks.js.org or codesandbox.io
Installation
# with npm:
npm install fireworks-js
# or yarn:
yarn add fireworks-js
Usage
If you are using a module bundler like Webpack or Rollup, etc.., import fireworks-js
into your project:
import { Fireworks } from 'fireworks-js'
const container = document.querySelector('.fireworks-container')
const fireworks = new Fireworks(container, { /* options */ })
fireworks.start()
fireworks.pause()
fireworks.clear()
// stop and clear fireworks
fireworks.stop()
// after initialization you can change the fireworks parameters
fireworks.setOptions({ delay: { min: 10, max: 15 }})
Using the CDN
<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.js"></script>
<!-- unpkg -->
<script src="https://unpkg.com/fireworks-js@latest/dist/fireworks.js"></script>
Usage in React (with hook useFireworks)
import { Fireworks } from 'fireworks-js/dist/react'
export const App = () => {
const options = {
speed: 3
}
const style = {
top: 0,
left: 0,
width: '100%',
height: '100%',
position: 'fixed',
background: '#000'
}
return <Fireworks options={options} style={style} />
}
Server-Side Rendering (with-no-ssr)
// components/Fireworks.tsx
import { Fireworks } from 'fireworks-js/dist/react'
export default () => <Fireworks />
// pages/index.tsx
import dynamic from 'next/dynamic'
const FireworksWithNoSSR = dynamic(
() => import('../components/Fireworks'),
{ ssr: false }
)
Options
Name | Type | Default | Description |
---|---|---|---|
rocketsPoint | number | 50 | - |
opacity | number | 0.5 | - |
speed | number | 2 | - |
acceleration | number | 1.05 | - |
friction | number | 0.95 | - |
gravity | number | 1.5 | - |
particles | number | 50 | - |
trace | number | 3 | - |
explosion | number | 5 | - |
autoresize | boolean | true | - |
hue | object | { min: 0, max: 360 } | - |
delay | object | { min: 15, max: 30 } | - |
boundaries | object | { visible: false, x: 50, y: 50, width: container.clientWidth, height: container.clientHeight } | - |
sound.enabled | boolean | false | - |
sound.files | string[] | [ 'explosion0.mp3', 'explosion1.mp3', 'explosion2.mp3' ] | - |
sound.volume | object | { min: 1, max: 2 } | - |
mouse | object | { click: false, move: false, max: 3 } | - |
brightness | object | { min: 50, max: 80 } | - |
brightness.decay | object | { min: 0.015, max: 0.03 } | - |
License
MIT License © 2021 Vitalij Ryndin