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: 5 months 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 (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-28T16:57:53.000Z (11 months ago)
- Last Synced: 2024-12-28T17:30:53.476Z (11 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)