Close Menu

scrollable

Scrollable is a powerful and lightweight JavaScript library that allows you to create smooth and customizable scrolling effects on your web pages. Whether you want to implement parallax scrolling, horizontal scrolling, or simply enhance the scroll behavior, Scrollable has got you covered.

Features

  • Create smooth scrolling effects using various scroll behaviors
  • Implement parallax scrolling with ease
  • Enable horizontal and vertical scrolling
  • Customize scroll speed and easing options
  • Add scroll animations to elements
  • Support for touch scrolling on mobile devices
  • Lightweight and easy to integrate into existing projects
  • Cross-browser compatible

Installation

Before using Scrollable, make sure you have included the latest version of jQuery in your project. You can then install Scrollable by following one of the methods below:

Using npm

To install Scrollable using npm, run the following command:

npm install scrollable-js

Using a script tag

If you prefer using a script tag, include the following code in the head or body section of your HTML file:

<script src="path/to/scrollable.min.js"></script>

Usage

Once you have installed Scrollable, you can start using its features by following these steps:

1. HTML Structure

Make sure you have the appropriate HTML structure for Scrollable to work. Specify a container element for the scrollable content, and add the necessary classes and attributes:

<div class="scrollable-container" data-scrollable>
  <div class="scrollable-content">
    <!-- Your content here -->
  </div>
</div>

2. CSS Styling

Apply CSS styles to the container element and its content to define the scrollable area. You can customize the width, height, background, and other properties to fit your design requirements.

3. Initialize Scrollable

In your JavaScript file, initialize Scrollable by targeting the container element and calling the scrollable() function:

import scrollable from 'scrollable-js';

const container = document.querySelector('.scrollable-container');
scrollable(container);

Customization

Scrollable provides various options for customization. You can pass an options object as the second argument when initializing Scrollable to modify its behavior:

scrollable(container, {
  behavior: 'smooth', // Specify scroll behavior ('smooth' or 'auto')
  vertical: true, // Enable vertical scrolling
  horizontal: false, // Enable horizontal scrolling
  speed: 800, // Specify scroll speed (in milliseconds)
  easing: 'swing', // Specify scroll easing ('linear' or 'swing')
  touch: true // Enable touch scrolling on mobile devices
});

Examples

Here are some examples showcasing the possibilities of Scrollable:

Parallax Scrolling

Add a parallax scrolling effect to your website to create a dynamic and engaging user experience. Control the parallax effect by adjusting the scroll speed and other options.

Horizontal Scrolling

Add a horizontal scrolling effect to your content containers, such as image galleries or timelines. Customize the scroll speed and easing for a smooth scrolling experience.

Scroll Animations

Add scroll animations to specific elements on your page to bring them to life as the user scrolls. Apply effects such as fade in, slide up, or scale to create captivating visual effects.

Conclusion

Scrollable is a versatile JavaScript library that empowers you to create beautiful and interactive scrolling effects. Whether you want to implement parallax scrolling, horizontal scrolling, or add scroll animations to elements, Scrollable provides the necessary tools and customization options to help you achieve your desired results. Start using Scrollable today and take your web pages to the next level!