Gathering detailed insights and metrics for brandojs
Gathering detailed insights and metrics for brandojs
Website background randomizer: Automatically change CSS backgrounds on any DOM element in a random or sequential order.
Installations
npm install brandojsDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
18.12.1
NPM Version
9.6.7
Releases
Unable to fetch releases
Languages
4
TypeScript
HTML
JavaScript
CSS
TypeScript (77.14%)
HTML (10.81%)
JavaScript (7.7%)
CSS (4.36%)
Developer
Download Statistics
Total Downloads
2,554
Last Day
2
Last Week
6
Last Month
29
Last Year
521
GitHub Statistics
MIT License
2 Stars
156 Commits
1 Watchers
6 Branches
1 Contributors
Updated on Jan 03, 2025
Bundle Size
4.87 kB
Minified
1.58 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.1.6
Package Id
brandojs@1.1.6
Unpacked Size
1.56 MB
Size
1.48 MB
File Count
10
NPM Version
9.6.7
Node Version
18.12.1
Published on
Jun 05, 2023
Total Downloads
Cumulative downloads
Total Downloads
2,554
Dev Dependencies
27
@babel/core@babel/preset-env@babel/preset-typescript@types/jest@types/marked@types/nodebabel-jestbabel-loaderconcurrentlycopy-webpack-plugincoverage-badgerhandlebarshtml-webpack-harddisk-pluginhtml-webpack-pluginidentity-obj-proxyjestjest-environment-jsdommarkedterser-webpack-plugints-jestts-nodetypedoctypedoc-plugin-extrastypescriptwebpackwebpack-cliwebpack-dev-server
bRando.js
Website background randomizer
Automatically change CSS backgrounds on any DOM element in a random or sequential order.
Compatibility: ✔️Vanilla JavaScript ❌React.js (Coming soon)
Demo: https://brandojs.isaacyakl.com
Created by: yak
📖 Table of Contents
➤ Table of Contents
➤ Intro
Would you like to...
- Randomly change backgrounds on your website?
- Smoothly rotate through a collection of CSS background images, colors, and/or gradients?
- Change backgrounds on 1337 elements simultaneously?! (not recommended but doable 😂)
- Impress your website visitors?
Try out bRando.js!
The bRando.js library lets you specify what HTML element(s) to add a background changer to, what CSS backgrounds to use, and more. It is usable in the browser and more environments are coming soon.
➤ Approach
bRando.js utilizes the pseudo-element ::after and CSS custom properties (variables) to facilitate smooth transitions. Background changer instances follow this approach:
- Create an ::after style definition with CSS variables and the chosen transition settings in order to update ::after backgrounds.
- Set subsequent backgrounds on the selected element(s) and corresponding ::after('s) in an alternating manner.
- Toggle the opacity of the ::after element(s) to switch between the ::after background and element background.
➤ Installation
There are a couple different ways to add this library:
CDN
Skip the download, include the following code in your HTML right before </head>:
1<script src="https://unpkg.com/brandojs/dist/bRando.js"></script>
Manual Download
Download the file, and include the following code in your HTML right before </head>:
1<script src="./your/scripts/path/bRando.js"></script>
Of course, make sure the path points to where you put the script.
➤ Verifying Installation
To test that the library is installed correctly, create a demo instance with the following code by placing it right before your page's </body> tag:
1<script> 2 const demo = bRando.create(); // creates a demo background changer 3</script>
This will create a background changer with demo backgrounds on the <body> element. You should see something like this behind the main content:
➤ Usage
Create a new background changer by calling the create() function from the bRando library and passing it an options object containing the desired settings.
1const options = { 2 CSSSelector: "main", // A CSS selector 3 // An array of CSS backgrounds 4 backgrounds: [ 5 "aqua", // solid color 6 "linear-gradient(80deg, #0864c8 25%, #588fca 75%)", // gradient 7 `url("somewhere/some-image.jpg") center/cover no-repeat`, // image 8 `center / contain no-repeat url("../../media/examples/firefox-logo.svg"), 9 #eee 35% url("../../media/examples/lizard.png")`, // everything 10 ], 11 timeout: 5000, // The time between background changes in milliseconds 12 random: true, // Whether to rotate through the backgrounds randomly or not 13 transition: "500ms ease-in", // A CSS transition to be used when changing between backgrounds 14}; 15 16const bgChanger = bRando.create(options); // create background changer with the options set above 17 18// call next() if you want the page to load with one of the backgrounds immediately 19bgChanger.next(); // remove this line if you want a smooth first transition
All options are optional and have default values if they are not included in the options object.
Learn how to control the background changer that is returned by referring to the bRando class documentation.
ℹ️ Preload Images
Be sure to preload any images used as backgrounds before creating the background changer or your end user may see partially loaded background images. There are a few ways to do this. For example, you could add preload
<link>tags in the<head>of your document:1<link rel="preload" href="some-image-used-as-a-background1.jpg" as="image" /> 2<link rel="preload" href="some-image-used-as-a-background2.jpg" as="image" /> 3<link rel="preload" href="some-image-used-as-a-background3.jpg" as="image" />
⚠️ Optimize Images
Always optimize any images used as backgrounds to minimize the chance that your end user sees partially loaded background images. Use something like imagecompressor.com which allows you to adjust quality settings and a compression level for each image.
➤ API Documentation
➤ To-Do
Planned
Features and fixes planned for development.
- Create React component
Ideas
Ideas I have thought up but will not add unless requested.
- Add event hooks:
- onChange()
- afterChange()
- Add previous()
Have a feature request? Create a new issue and select the "Feature request" type OR write the feature yourself and create a pull request.
➤ Issues
Found a 🐛? Create a new issue or propose a fix by creating a pull request.
➤ License
Licensed under MIT.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/27 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/update-copyright-year-in-license-file.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/update-copyright-year-in-license-file.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/isaacyakl/brandojs/update-copyright-year-in-license-file.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/update-copyright-year-in-license-file.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/isaacyakl/brandojs/update-copyright-year-in-license-file.yml/master?enable=pin
- Info: 0 out of 1 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 4 are checked with a SAST tool
Reason
28 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.8
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More