screen_color_plugin
v1.0.19
Published
This is a jQuery plugin that enables developers to add a screen color change button to their web pages. With this plugin, users can customize the background colors with the button.
Downloads
8
Maintainers
Readme
SCREEN COLOR PLUGIN
Elevate your website's aesthetics with the Screen Color Plugin – a robust jQuery tool that seamlessly integrates a screen color change button, bringing an engaging visual element to your web pages. he plugin now includes a button for automatic color change, cycling through colors every 2 seconds.
Explore the live example at Screen Color Button.
If you find value in this plugin, consider contributing to support ongoing enhancements. Your donation helps us maintain and improve the plugin for the community.
New Features
Automatic Color Change Button The plugin now includes a button for automatic color change, cycling through colors every 2 seconds.
Code Refactoring and Cleanup
The code has been reviewed and optimized for improved readability and performance.
General Features
Manual Color Change Button
The plugin provides an interactive button allowing manual change of background colors.
Automatic Color Change Button
In addition to manual control, the plugin now includes a button to start or stop automatic color transition.
Text Color Change for Contrast
Text automatically adjusts to ensure proper contrast with the selected background color.
Customization
Background Color Adjustment
Personalize background colors to suit your preferences by adding or removing options.
Transition Time Adjustment
Configure transition times to control the speed of the animation.
Text Color Adjustment
Modify text colors to ensure optimal visibility and contrast with the selected background color.
Installation
NPM:
- Run
npm install screen_color_plugin
to install the plugin.
- Run
Initialization:
- Include jQuery and the plugin script in your HTML.
- Select the desired button using jQuery and call the
screenColorChange()
method to activate the plugin.
<script src="path/to/jquery.min.js"></script> <script src="path/to/my-plugin.js"></script> <script> $(document).ready(function () { $("#scrollDownButton").screenColorChange({ colors: [ { name: "blue", color: "rgb(43, 174, 226)" }, { name: "green", color: "rgb(43, 226, 113)" }, { name: "yellow", color: "rgb(177, 226, 43)" }, { name: "purple", color: "rgb(159, 43, 226)" }, { name: "red", color: "rgb(214, 40, 40)" }, { name: "black", color: "#080808" }, ], }); var autoChangeEnabled = false; $("#autoColorChangeSwitch").on("click", function () { autoChangeEnabled = !autoChangeEnabled; if (autoChangeEnabled) { // Inicie a mudança automática de cor startAutoColorChange(); } else { // Pare a mudança automática de cor stopAutoColorChange(); } }); function autoChangeColor() { setInterval(function () { $("#scrollDownButton").click(); }, 2000); // Mude a cor a cada 2 segundos } // Adicione esta função para parar a mudança automática de cor function stopAutoColorChange() { console.log("Parando a mudança automática de cor"); } });
User Experience
Immerse your users in an interactive journey with the Screen Color Plugin. Create a visually appealing website that leaves a lasting impression.
Contribution
Feel free to contribute with improvements, bug fixes, or new features. Open an issue or submit a pull request! Drop a message and let us know how you're using it! Let's collaborate!
Support
For support, send me an email.
License
This project is licensed under the MIT License, by Biasiolo.