Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including bgfade with all npm packages installed. Try it out:

var bgfade = require("bgfade")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

bgfade v1.0.1

JavaScript library for switch DOM elements.


bgfade is JavaScript Library to switch display of DOM elements with fade.

How to use

install this packege.

$ npm install -D bgfade

edit html file like below.

 #target {
   height: 300px;
   list-style: none;
   width: 300px;

 #target li {
   background-color: royalblue;
   font-size: 30px;
   height: 100%;
   text-align: center;
   width: 100%;

<!-- must use ul with id -->
<ul id="target">

edit js file like below.

import bgfade from 'bgfade';
const bg = bgfade('target');


bgfade use some parameters.

Bgfade(id, {speed: value, duration: value});
id(String)id name of target ul. must.
speed(Number)the time of fade out. default 3.
duration(Number)duration of fade out to fade out. default 4.


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free