Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shubhrajps/dardoc-apple-tv
A React app replicating the navbar and navigation in the apple.com website with animations and content.
https://github.com/shubhrajps/dardoc-apple-tv
framer-motion javascript react tailwind
Last synced: 26 days ago
JSON representation
A React app replicating the navbar and navigation in the apple.com website with animations and content.
- Host: GitHub
- URL: https://github.com/shubhrajps/dardoc-apple-tv
- Owner: shubhrajps
- Created: 2024-09-10T13:35:58.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-12T05:13:03.000Z (about 2 months ago)
- Last Synced: 2024-09-30T08:22:11.226Z (about 1 month ago)
- Topics: framer-motion, javascript, react, tailwind
- Language: JavaScript
- Homepage: https://dardoc-apple-tv.vercel.app
- Size: 527 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Dardoc Apple TV
--------------------------------
### Description
-----------
This project showcases a scrollable section that displays text and images in a visually engaging manner. As the user scrolls down, each text and image pair animates into view, providing a smooth and interactive user experience.
### Features
--------
- Displays one text and image pair at a time.
- Smooth animations for text and images as they come into view.
- Responsive design that adapts to different screen sizes.
- Utilizes Framer Motion for advanced animations and scroll detection.
### Installation
------------
1. Clone the repository:
bash
`git clone https://github.com/username/project-name.git `
2. Navigate to the project directory:
bash
`cd project-name `
3. Install dependencies:
bash
`npm install `
4. Start the development server:
bash
`npm start `
### Usage
-----
Open your browser and navigate to `http://localhost:3000` to view the project in action. Scroll down to see each text and image pair animate into view.
### Demo
------
https://github.com/user-attachments/assets/83ca4dcb-cd5f-4c6e-b123-72520ec49039
### Contributing
------------
If you would like to contribute to this project, please follow these steps:
1. Fork the repository.
2. Create a new branch: `git checkout -b feature/your-feature`.
3. Commit your changes: `git commit -am 'Add some feature'`.
4. Push to the branch: `git push origin feature/your-feature`.
5. Submit a pull request.
### Credits
-------
- Developed by Shubhraj Prasad Singh.
- Inspired by modern web design principles and user experience best practices.
### License
-------
This project is licensed under the MIT License. See the [LICENSE](https://www.perplexity.ai/search/LICENSE) file for more details.