scrollfeather

# FeatherScroll FeatherScroll is a lightweight, smooth scrolling library designed for full device support and easy integration. It provides advanced scrolling features such as parallax effects, sticky elements, and smooth animations without requiring additional dependencies. ## 🚀 Features - **Smooth Scrolling:** Automatically enables smooth scrolling when included. - **Supports Multiple Scrollable Areas:** Works with multiple content sections on a single page. - **Parallax Scrolling:** Apply horizontal and vertical scroll effects. - **Sticky Elements:** Keep elements fixed within their parent while scrolling. - **Scroll Direction Detection:** Identify whether the user is scrolling up or down. - **Fully Configurable:** Customize scroll speed, easing, and gestures. - **Integration with GSAP ScrollTrigger:** Seamless compatibility for advanced animations. --- ## 📦 Installation ### **Using NPM** ```sh npm install scrollfeather ``` ### **Using JSDelivr (CDN)** ```html <script src="https://cdn.jsdelivr.net/npm/scrollfeather/featherScroll.js"></script> ``` FeatherScroll will be automatically available globally as `FeatherScroll`. --- ## 🛠️ Basic Usage ### **1️⃣ Include FeatherScroll in Your Project** ```html <script src="https://cdn.jsdelivr.net/npm/scrollfeather/featherScroll.js"></script> ``` ### **2️⃣ Initialize FeatherScroll** Feather Scroll doesn't need any extra options for basic smooth scrolling initialization ```js const scroll = new FeatherScroll(); ``` --- ## ⚙️ Options You can customize FeatherScroll with various options: ```js const scroll = new FeatherScroll({ smooth: true, // Enable smooth scrolling duration: 1.2, // Scroll duration (seconds) easing: (t) => 1 - Math.pow(1 - t, 3), // Easing function direction: 'vertical', // 'vertical' | 'horizontal' gestureDirection: 'both', // Mouse/touch gesture control mouseSensitivity: 1, // Sensitivity for wheel scrolling touchSensitivity: 2, // Sensitivity for touch scrolling infinite: false // Infinite scrolling }); ``` --- ## 📌 Sticky Elements To make an element sticky within its parent, add the `data-scroll-sticky` attribute: ```html <div class="parent"> <div class="sticky" data-scroll-sticky>I'm a sticky element!</div> </div> ``` The element will remain fixed inside its parent container while scrolling. --- ## 🎭 Parallax Scrolling Apply a **scroll speed effect** using `data-scroll-speed`: ```html <div data-scroll-speed="0.5">This moves slower.</div> <div data-scroll-speed="1.5">This moves faster.</div> ``` Apply **horizontal scrolling** using `data-scroll-direction="horizontal"`: ```html <div data-scroll-speed="1" data-scroll-direction="horizontal">This moves sideways.</div> ``` You can combine both: ```html <div data-scroll-speed="1" data-scroll-direction="both">Moves in diagonally!</div> ``` --- ## 🔄 Scroll Direction Detection You can detect whether the user is scrolling up or down using an event listener: ```js document.addEventListener('scroll', () => { const direction = scroll.getScrollDirection(); console.log(`Scrolling ${direction}`); }); ``` This will return `'up'` or `'down'` based on the user's scroll behavior. --- ## 🎯 Scroll to Specific Section You can scroll to any element or position programmatically: ```js scroll.scrollTo('#section', { offset: -50, duration: 1 }); ``` --- ## 🎬 GSAP ScrollTrigger Integration If GSAP ScrollTrigger is included, FeatherScroll will automatically sync with it: ```js gsap.registerPlugin(ScrollTrigger); const scroll = new FeatherScroll(); ScrollTrigger.defaults({ scroller: scroll.wrapper }); ``` --- ## 🛑 Controlling Scroll Behavior ### **Start or Stop Smooth Scrolling** ```js scroll.start(); // Enable smooth scrolling scroll.stop(); // Disable smooth scrolling ``` ### **Destroy FeatherScroll** ```js scroll.destroy(); ``` --- ## 🛠️ Updating Options Dynamically You can update the scroll options dynamically: ```js scroll.updateOptions({ duration: 2, smooth: false }); ``` This allows you to modify scroll settings without reinitializing the instance. --- ## 🌍 Supporting Multiple Scroll Instances FeatherScroll supports multiple scrolling areas: ```js const scroll1 = new FeatherScroll({ wrapper: '.container1', content: '.content1' }); const scroll2 = new FeatherScroll({ wrapper: '.container2', content: '.content2' }); ``` --- ## 📜 License FeatherScroll is open-source under the [MIT License](LICENSE). --- ## 🤝 Contributing If you want to contribute, feel free to submit pull requests on [GitHub](https://github.com/yourusername/featherscroll). --- ## ❤️ Support FeatherScroll If you find FeatherScroll useful and would like to support its development, consider donating: - **PayPal:** [@RanvijayRaj7](https://www.paypal.me/RanvijayRaj7) - **UPI:** gamersuraj720@okhdfcbank Your support helps keep this project alive and improving! 🚀 --- ## 📧 Need Help? For questions or issues, create a GitHub issue or reach out to me!