![sc1](https://private-user-images.githubusercontent.com/101706106/341783831-1f7aaaeb-1e4d-4a67-b525-1161a46f7d3b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNjYzMTIsIm5iZiI6MTcyNTA2NjAxMiwicGF0aCI6Ii8xMDE3MDYxMDYvMzQxNzgzODMxLTFmN2FhYWViLTFlNGQtNGE2Ny1iNTI1LTExNjFhNDZmN2QzYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgzMVQwMTAwMTJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lNWJmMWM3M2ZhZmNiYWFlNmEyZWYxODk4Yzc2NWUwMjAxOTJmZWE3NWE5MTg4M2U0NGMyNDdmYjkxNjk2NmU4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.gjgKAeCeO4X-TIKOS0OnwRfTwYGJktoE2LYC0A6h5WQ)
![sc2](https://private-user-images.githubusercontent.com/101706106/341783821-c6f41409-6ca9-4f66-854a-3af81dd561b2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNjYzMTIsIm5iZiI6MTcyNTA2NjAxMiwicGF0aCI6Ii8xMDE3MDYxMDYvMzQxNzgzODIxLWM2ZjQxNDA5LTZjYTktNGY2Ni04NTRhLTNhZjgxZGQ1NjFiMi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgzMVQwMTAwMTJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02YTAxMTMwZmFjMWM1MzZiMWU0ZDhlNDUzYmU2NWUyMWRiYTdlY2UzYmI5ZGZmNGVkZDFlZWUzNTMzNDVlYjg3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.LhHRNfrQXGiSy8dHJuuypajI_P4ULVdGqtwk-gRxdl4)
![sc3](https://private-user-images.githubusercontent.com/101706106/341783805-b034115b-31e3-4e94-88f5-ef872227893e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNjYzMTIsIm5iZiI6MTcyNTA2NjAxMiwicGF0aCI6Ii8xMDE3MDYxMDYvMzQxNzgzODA1LWIwMzQxMTViLTMxZTMtNGU5NC04OGY1LWVmODcyMjI3ODkzZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgzMVQwMTAwMTJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00MTBmNmJhMWQzNzg0N2I1NDZiNzdhNzA3ZjhkYmUwNTM5NTE4OTFkMmQwMzI3ZTQ3YTFjY2EwY2U0NmRiMDg4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.MiE7Ob67xWkDaZiQIptjCjg6hgrGNDoAlkqCWTij9hU)
![sc4](https://private-user-images.githubusercontent.com/101706106/341784070-1cc56137-691e-4536-80e5-d1718034d049.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNjYzMTIsIm5iZiI6MTcyNTA2NjAxMiwicGF0aCI6Ii8xMDE3MDYxMDYvMzQxNzg0MDcwLTFjYzU2MTM3LTY5MWUtNDUzNi04MGU1LWQxNzE4MDM0ZDA0OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgzMVQwMTAwMTJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04Y2JkYjhiZGEzM2FmOWVhN2ZmMjYxMTMzNTc4ZWJlZGExNjQ2OGRjZWYyMTAwYTJiM2Q3MTAxY2MyYjgxYjE1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.bCBnt7x_Hf55vJAsJlYkWy7R2hP-5hLzVYku_1cHLVY)
This project demonstrates a unique scroll effect using Lenis JS, where text scrolls horizontally behind an image div as the images move vertically. Inspired by creative scrolling animations, I aimed to showcase a seamless and engaging user experience through smooth horizontal and vertical scroll effects.
- HTML: Used for creating the basic structure of the project.
- CSS: Employed for designing and styling the elements, including the large text and image div.
- Lenis JS: Utilized for the main scrolling effects, providing a smooth horizontal scroll for the text and a vertical scroll for the image div.
This project was a valuable learning experience, particularly in exploring the capabilities of Lenis JS. Implementing the horizontal and vertical scroll effects helped me understand the nuances of the library and how it can enhance user interaction. The process of integrating Lenis JS with HTML and CSS was both challenging and rewarding, contributing significantly to my frontend development skills.
I invite you to explore the repository and experience the Lenis JS scroll effect project. Your feedback and suggestions are highly appreciated, as they will help me continue to improve and refine my skills. Feel free to share your thoughts and insights on the project!