https://github.com/yashi-singh-1/day-11-custom-scrollbar-design

Created a customization scrollbar that changes color dynamically based on scroll position. Users can select background and scrollbar colors using intuitive color pickers for a personalized browsing experience.
https://github.com/yashi-singh-1/day-11-custom-scrollbar-design

css css3 front-end front-end-development front-enddevelopment frontend frontend-development frontenddevelopment html html5 javascript

Last synced: 2 months ago
JSON representation

Created a customization scrollbar that changes color dynamically based on scroll position. Users can select background and scrollbar colors using intuitive color pickers for a personalized browsing experience.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/day-11-custom-scrollbar-design
• Owner: Yashi-Singh-1
• Created: 2024-06-21T18:02:03.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-06-21T18:03:36.000Z (10 months ago)
• Last Synced: 2024-11-10T11:15:22.499Z (6 months ago)
• Topics: css, css3, front-end, front-end-development, front-enddevelopment, frontend, frontend-development, frontenddevelopment, html, html5, javascript
• Language: JavaScript
• Homepage:
• Size: 400 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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


![Preview](Preview.png)

Getting Started



    


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.

    

    


Open index.html in a Web Browser: Double-click on the index.html file to view the project in your default web browser.

    


Adjust Color Settings: Use the color pickers to customize the background and scrollbar colors.

    


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:



    


Fork the Repository: Click on the "Fork" button at the top right corner of the repository's page on GitHub.

    


Clone Your Fork: Clone the forked repository to your local machine using Git.

    


Make Changes: Make your desired changes to the codebase.

    


Commit Your Changes: Commit your changes with a descriptive commit message.

    


Push to Your Fork: Push your changes to your forked repository on GitHub.

    


Submit a Pull Request: Navigate to the "Pull Requests" tab of your forked repository and submit a pull request.



    
© 2024 Yashi Singh