A color drifting frontend utility
Don't like this orange and blue color scheme? Don't worry, it won't last long.
Acidd scans all elements with the class 'acidd' and stores their initial background-color and/or color values in an array. It then drifts the R,G, & B values for each element by a random value between 0-2. This results in a slow drift but eventually you will notice, well, this page is no longer orange and blue, is it?
How do you use it?
Well like any other script, install it using NPM:
npm install acidd
Then add it to your html:
<script src="node_modules/acidd/acidd.js" charset="utf-8"></script>
Finally add the classes to the elements you want to drift thusly:
class='acidd bgc-0 clr-0'
- You can assign just a bgc-* class to an element if you want just the background-color to drift.
- Or, you can assign just a clr-* class to an element if you want just the color to drift.
- You can assign multiple bgc-* or clr-* values to an element if you want, it won't break anything, but only one value will be applied.
- You can use any number you want following bgc-* or clr-* (eg: 1, 8, 13, 138...) It doesn't matter as long as it's a number.
- The value after bgc- or clr- does have to be a number though. You can't use bgc-banana or anything. Mostly because then I'd try to figure out how to make it go from green to yellow to brown spots to black before completely removing the element from the DOM and who has that sort of time?
- No you don't have to use NPM, I still feel weird using it for front-end too. You can always download the acidd.js file from github and add it to your page like usual. I just ask that you keep the attribution in the file.
bgc-2 clr-4 clr-5 clr-6 clr-7