mantoufan / yzhanBG

Use multiple videos, images, and weather as background, with mute, hide, text, and cherry blossom, rain, snow, firefly, and butterfly animations. 用多个视频、图片、天气作背景，支持静音、隐藏内容、文字，以及樱花、雨、雪、萤火虫和蝴蝶动画

yzhanBG

Use multiple videos, images, and weather as background, with mute, hide, text, and cherry blossom, rain, snow, firefly, and butterfly animations.
用多个视频、图片、天气作背景，支持静音、隐藏内容、文字，以及樱花、雨、雪、萤火虫和蝴蝶动画

Demo

Online Demo

Setup

Node.js

npm i yzhanbg
import YZhanBG from 'yzhanbg'

Browser

<script src="https://cdn.jsdelivr.net/npm/yzhanbg@latest/docs/yzhanbg.min.js"></script>

Usage

const yzhanbg = new YZhanBG()
yzhanbg.run([{
  url: './bg/1.mp4',
  weather: {
    type: 'firefly', // Options: sakura | snow | firefly | rain | butterfly 
    maxDuration: 10 // Default: 10s, this option can determine the speed of animations
  },
  text: '©ナルトMinh'
},{
  url: './bg/2.jpg',
  duration: 3, // Default: undefined. Units: seconds. If video duration < this, it ends early
  weather: {
    type: 'sakura',
    maxDuration: 5
  },
  text: '©narumilk'
},{
  url: './bg/3.mp4',
  weather: {
    type: 'butterfly',
    maxDuration: 5
  },
  text: '©DeRanK'
}]) // Add multiple objects with videos, weather, and text to the list in the shown format.
yzhanbg.pause() // Pause the video and clear the weather
yzhanbg.resume() // Resume the video and the weather
yzhanbg.mute() // Mute the video
yzhanbg.unmute() // Unmute the video
yzhanbg.current() // { url: './bg/1.mp4', weather: { type: 'firefly', maxDuration: 10 }, text: '@author' }
yzhanbg.destory() // Destory the instance and free up memory

Development

Build

npm run build

Preview

npm run dev