https://github.com/karl-horning/changing-background-colour-on-scroll
This project demonstrates changing the background colour of the page as the user scrolls through different sections. Each section has its own background colour, creating a visually appealing scrolling experience.
https://github.com/karl-horning/changing-background-colour-on-scroll
animation codepen css frontend html javascript scroll-animations scrolling-effects
Last synced: about 12 hours ago
JSON representation
This project demonstrates changing the background colour of the page as the user scrolls through different sections. Each section has its own background colour, creating a visually appealing scrolling experience.
- Host: GitHub
- URL: https://github.com/karl-horning/changing-background-colour-on-scroll
- Owner: Karl-Horning
- License: mit
- Created: 2023-12-31T19:56:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-28T16:57:53.000Z (6 months ago)
- Last Synced: 2024-12-28T17:30:53.476Z (6 months ago)
- Topics: animation, codepen, css, frontend, html, javascript, scroll-animations, scrolling-effects
- Language: HTML
- Homepage: https://codepen.io/karlhorning/pen/QWojGpW
- Size: 1.15 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Changing Background Colour on Scroll
## Table of Contents
- [Changing Background Colour on Scroll](#changing-background-colour-on-scroll)
- [Table of Contents](#table-of-contents)
- [Description](#description)
- [Features](#features)
- [Demo](#demo)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [License](#license)
- [Troubleshooting](#troubleshooting)
- [Contributing](#contributing)
- [Acknowledgments](#acknowledgments)
- [Contact](#contact)
- [Author](#author)
## Description
Dynamic background colour transition on scroll using JavaScript and CSS. The page's background updates to match the "data-color" attribute of each section as the user scrolls.
## Features
- Smooth background colour transition on scroll.
- Tailwind CSS for styling.
- Responsive design.
## Demo
See the demo on [CodePen](https://codepen.io/karlhorning/pen/QWojGpW).
## Getting Started
Follow these instructions to get a copy of the project up and running on your local machine.
### Prerequisites
- Web browser
### Installation
1. Clone the repository:
```bash
git clone https://github.com/Karl-Horning/changing-background-colour-on-scroll.git
```
2. Open the project folder:
```bash
cd changing-background-colour-on-scroll
```
3. Open `index.html` in your preferred web browser.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Troubleshooting
- If you encounter any issues during installation or execution, please check the following:
- Ensure that your web browser is up to date.
## Contributing
Contributions are welcome! Please follow these guidelines:
1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and ensure that the project still works.
4. Create a pull request with a clear description of your changes.
## Acknowledgments
- Special thanks to [Jack Harner](https://codepen.io/jackharner/) for the original project available at [https://codepen.io/jackharner/pen/bdPmQM](https://codepen.io/jackharner/pen/bdPmQM).
- Special thanks to [Google Fonts](https://fonts.googleapis.com/css?family=Share+Tech+Mono) for providing the "Share Tech Mono" font used in this project.
## Contact
For any inquiries or support related to this project, please contact Karl Horning.
## Author
Karl Horning: [GitHub](https://github.com/Karl-Horning/) | [LinkedIn](https://www.linkedin.com/in/karl-horning/) | [CodePen](https://codepen.io/karlhorning)