Dynamic Color Scrollbar with Color Picker

This project demonstrates how to create a dynamic color scrollbar in a web page using HTML, CSS, and JavaScript. The scrollbar color changes dynamically based on the user's scroll position. Additionally, users can customize the background color and scrollbar color using color pickers.

Features

• Dynamic Scrollbar Color: The color of the scrollbar thumb changes gradually as the user scrolls through the page.
• Color Pickers: Users can select custom colors for the background and scrollbar using color pickers.
• Text Color Adjustment: Text colors for headings and paragraphs dynamically adjust based on the background color's brightness to ensure readability.
• Responsive Design: The page layout adjusts to different screen sizes for a seamless user experience.

Preview

Getting Started

1. Clone the Repository: Open your terminal and run the following command to clone the repository to your local machine:

   git clone https://github.com/Yashi-Singh-1/Day-11-Custom-Scrollbar-Design.git

   Replace https://github.com/Yashi-Singh-1/Day-11-Custom-Scrollbar-Design.git with the actual URL of your GitHub repository.
2. Open index.html in a Web Browser: Double-click on the index.html file to view the project in your default web browser.
3. Adjust Color Settings: Use the color pickers to customize the background and scrollbar colors.
4. Scroll Through the Page: Observe how the scrollbar color changes dynamically as you scroll through the page.

Contributing

To contribute to this project, follow these steps:

1. Fork the Repository: Click on the "Fork" button at the top right corner of the repository's page on GitHub.
2. Clone Your Fork: Clone the forked repository to your local machine using Git.
3. Make Changes: Make your desired changes to the codebase.
4. Commit Your Changes: Commit your changes with a descriptive commit message.
5. Push to Your Fork: Push your changes to your forked repository on GitHub.
6. Submit a Pull Request: Navigate to the "Pull Requests" tab of your forked repository and submit a pull request.

© 2024 Yashi Singh