jquery-easyscroll

A jQuery plugin for scrolling a set of images/elements easily

Note

EasyScroll : a scroll-tastic jQuery plugin Inspired from jquery-simplyscroll

Last revised: 07/01/2024

Note : The original project on github (simplyscroll) was marked as lagecy and we were not getting new updates on that, so we made some modification and make it available for all with new name.

Features

• Smooth Scrolling: Creates smooth transition effects when navigating between sections of a webpage.
• Customizable Scrolling Speed: Control the speed of the scrolling animation to fit your design needs.
• Customizable Easing: Supports different easing functions to create more natural scrolling animations.
• Orientation Support: Choose between horizontal and vertical scrolling.
• Auto-Scrolling: Automatically scroll through content with loop or bounce modes.
• Pause on Hover/Touch: Optionally pause scrolling when hovering or touching the scrollable area.
• Manual Controls: Provide buttons for manual scrolling.
• Loop and Bounce Modes: Scroll continuously in a loop or bounce back at the end of the content.
• Touch Support: Fully supports touch events for mobile devices.
• Customizable Styling: Easily customize the look and feel using CSS.

Installation

You can install the jquery-easyscroll package using npm:

npm install jquery-easyscroll

Alternatively, you can include the plugin and CSS directly in your HTML file:

<link rel="stylesheet" href="path/to/jquery.easyscroll.css">
<script src="path/to/jquery.easyscroll.min.js"></script>

Usage

After installing or including the plugin, you can use it in your project like this:

Basic Initialization

import EasyScroll from 'jquery-easyscroll';

$(document).ready(function() {
    $('.your-selector').easyScroll();
});

Or using the class directly:

$(document).ready(function() {
    new EasyScroll('.your-selector', {
        // your options here
    });
});

Example Usage

Here’s a more detailed example:

new EasyScroll('.scrollable-content', {
    customClass: 'custom-scroll',
    speed: 2,
    orientation: 'vertical',
    auto: true,
    autoMode: 'loop',
    direction: 'forwards',
    pauseOnHover: true,
    pauseOnTouch: true,
    startOnLoad: false,
    initialOffset: 100,
});

HTML Example

<div class="scrollable-content">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

<link rel="stylesheet" href="path/to/jquery.easyscroll.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.easyscroll.min.js"></script>
<script>
    $(document).ready(function() {
        new EasyScroll('.scrollable-content', {
            customClass: 'custom-scroll',
            speed: 3,
            orientation: 'horizontal',
            auto: true,
            autoMode: 'bounce',
            direction: 'forwards',
            pauseOnHover: true,
        });
    });
</script>

CSS Customization

The jquery.easyscroll.css file provides a set of default styles that can be easily customized. Below are some key classes and how they are used:

Master Classes

• .easy-scroll-container: The main container that wraps the entire scrollable content.
• .easy-scroll-clip: A wrapper around the list that manages the overflow and hides the non-visible parts.
• .easy-scroll-list: The list of items that scrolls.
• .easy-scroll-btn: The buttons for manual control, like left/right or up/down.
• .easy-scroll-btn-left, .easy-scroll-btn-right, .easy-scroll-btn-up, .easy-scroll-btn-down: Specific classes for directional buttons.

Example Markup for Horizontal Scroller

<div class="your-custom-class easy-scroll-container">
    <div class="easy-scroll-btn easy-scroll-btn-left"></div>
    <div class="easy-scroll-btn easy-scroll-btn-right"></div>
    <div class="easy-scroll-clip">
        <ul class="easy-scroll-list">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
</div>

Vertical Scroller Example

.vert {
    width: 340px;
    height: 400px;
    margin-bottom: 1.5em;
}

.vert .easy-scroll-clip {
    width: 290px;
    height: 400px;
}

.vert .easy-scroll-list li {
    width: 290px;
    height: 200px;
}

Customizing Buttons

The CSS file includes styles for customizing the buttons. You can replace buttons.png with your own button sprites or adjust the background-position values to match your custom sprites.

Example of Overriding Styles

.custom-scroll .easy-scroll-btn-left {
    background-image: url('path/to/your-custom-button.png');
}

.custom-scroll .easy-scroll-btn-right {
    background-image: url('path/to/your-custom-button.png');
}

License

This project is open-source and available under the MIT License.

Contribution

We welcome contributions! If you have ideas or improvements, feel free to submit a pull request or open an issue.

Credits

This plugin is developed and maintained by the Nishadil Developers Team, part of Nishadil's OpenSources projects.